自定义图像沿svg路径运动

平时经常会用到svg,都是用工具生成，直接拿来用。当项目要用到自定义图像做路径运动的时候就需要自己动手手辣。
这几天做项目常用到这几个效果，写一个文章归纳。

我们康康示例效果

---

二次贝塞尔曲线

三次次贝塞尔曲线

回顾svg贝塞尔曲线指令

---

二次贝塞尔曲线

Q x1 y1 x y ;(x1,y1)是控制点,(x,y)代表曲线的终点。

三次贝塞尔曲线指令

Cx1 y1, x2 y2; (x1,y1)和(x2,y2)分别是两个控制点，(x,y)代表曲线的终点。
网上资料很多哒，不足自己去找找哈

入正题写代码

---

自定义一个图像 也就是例子中运动的小球

标签内定义图案；
是一个填充标签；元素中的内容直到引用的时候才会显示，标签里面必须定义一个id，这个id是你后面要引用的地方需要使用的你也可以定义宽度高度；
是我例子中运动的小球，好像必须要转成base64才可以，我直接用的图片路径不行啊...让我在康康...如果不需要图片，你也可以使用或者 等等，看起来很简单但是。。。![
微信截图_20191212105649.png](/img/bVbBop4)查了好久的资料。。最后在一个英文文档中看见，但是看了以后链接就没有存上。

定义padth

自定义的图我们也定义好啦，那就写path啦
我们看三次贝塞尔曲线中的例子，有12根线，那就需要一个起点，终点还有两个控制点啦

因为例子中的球有12根线，我们用代码生成吧

// getElementPosition是自定义获取dom的位置的方法
svgChart = () => {
    let beginPoint = getElementPosition(this.beginPoint); // 起点
    let endPoint = getElementPosition(this.endPoint); // 终点dom 
    let lines = [];
    for (let i = 0; i < 12; i++) {
        lines.push({
            name: `path${i}`,
            path: [
                [endPoint.x, endPoint.y],
                [-65 + (50 * i), 180], // 控制点1
                [-65 + (50 * i), 28], // 控制点2
                [beginPoint.x, beginPoint.y]
            ],
            lineStyle: {
                fill: 'transparent',
                stroke: '#006ecf',
                strokeWidth: 1
            }
        });
        this.setState({ lines });
    }
}

 this.svgContent = c}>
        
        {/* 起点 */}
        
 this.beginPoint = c}>
        {/* 终点 */}
        
 this.endPoint = c}>
    

我们将看见一下图中一样的12跟虚线

欧克欧克。。快了快了

将定义的图用上，让图形动起来

代码中我们定义了一个宽度和高度分别为40的矩形，填充背景是我们上面定义的图。这里fill="url(#imgpattern)对应的也是以上自定义的图形id。
欧克欧克。。再配合不过此标签好像不支持ie哦；还有一种方式是css：offset-path: path("M 208 231 C -65 180 -65 28 208 0");好像最兼容的是用translate3d但是麻烦一点，下次可以更新这个兼容ie的方法哦

差不多就这样啦。另外一个例子中就不说啦。那个和这个一样，只是少了一个控制点而已哦