自定義圖像沿svg路徑運動

平時常常會用到svg,都是用工具生成，直接拿來用。當項目要用到自定義圖像作路徑運動的時候就須要本身動手手辣。
這幾天作項目經常使用到這幾個效果，寫一個文章概括。

咱們康康示例效果

---

二次貝塞爾曲線

三次次貝塞爾曲線

回顧svg貝塞爾曲線指令

---

二次貝塞爾曲線

Q x1 y1 x y ;(x1,y1)是控制點,(x,y)表明曲線的終點。

三次貝塞爾曲線指令

Cx1 y1, x2 y2; (x1,y1)和(x2,y2)分別是兩個控制點，(x,y)表明曲線的終點。
網上資料不少噠，不足本身去找找哈

入正題寫代碼

---

自定義一個圖像 也就是例子中運動的小球

<defs>
    <pattern id="imgpattern" x="0" y="0" width="40" height="40">
        <image width="40" 
            height="40"
            xlinkHref="data:image/svg+xml;base64,此處是一個svg格式的base64圖片哦" />
    </pattern>
</defs>

<defs>標籤內定義圖案；
<pattern>是一個填充標籤；元素中的內容直到引用的時候纔會顯示，<pattern>標籤裏面必須定義一個id，這個id是你後面要引用的地方須要使用的你也能夠定義寬度高度；
<image>是我例子中運動的小球，好像必需要轉成base64才能夠，我直接用的圖片路徑不行啊...讓我在康康...若是不須要圖片，你也可使用<text>或者 <circle> 等等，看起來很簡單可是。。。![
微信截圖_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 });
    }
}

<div className={styles.arthTurn} ref={c => this.svgContent = c}>
        <svg
            width="100%"
            height="100%"
            version="1.1">
            <defs>
                <pattern id="imgpattern" x="0" y="0" width="40" height="40">
                    <image width="40" height="40"
                        xlinkHref="此處是一個svg格式的base64圖片哦" />
                </pattern>
            </defs>
            {
                lines.map((d, index) => {
                    let path = [];
                    d.path.forEach((p, i) => {
                        switch (i) {
                            case 0:
                                p = `M${p[0]},${p[1]}`;
                                break;
                            case 1:
                                p = `C${p[0]},${p[1]}`;
                                break;
                            case 2:
                                p = `${p[0]},${p[1]}`;
                                break;
                            case 3:
                                p = `${p[0]},${p[1]}`;
                                break;
                        }
                        path.push(p);
                    });
                    path = path.join(' ');
                    const { fill = 'transparent', stroke = '#000', strokeWidth = 2 } = d.lineStyle || {};
                    return (
                        <Fragment>
                            <path
                                key={d.id}
                                fill={fill}
                                stroke={stroke}
                                strokeDasharray="3,3"
                                d={path}
                                strokeWidth={strokeWidth}
                                className="path"
                            />
                        </Fragment>
                    );
                })
            }
        </svg>
        {/* 起點 */}
        <div className={styles.beginPoint} ref={c => this.beginPoint = c}></div>
        {/* 終點 */}
        <div className={styles.endPoint} ref={c => this.endPoint = c}></div>
    </div>

咱們將看見一下圖中同樣的12跟虛線

歐克歐克。。快了快了

將定義的圖用上，讓圖形動起來

<Fragment>
        <path
            key={d.id}
            fill={fill}
            stroke={stroke}
            strokeDasharray="3,3"
            d={path}
            strokeWidth={strokeWidth}
            className="path"
        />
        <rect x="-20" y="-20" width="40" height="40" fill="url(#imgpattern)">
            <animateMotion path={path} begin={animatTime} dur="6s" repeatCount="indefinite" />
        </rect >
    </Fragment>

代碼中咱們定義了一個寬度和高度分別爲40的矩形，填充背景是咱們上面定義的圖。這裏fill="url(#imgpattern)對應的也是以上自定義的圖形id。
歐克歐克。。再配合<animateMotion>不過此標籤好像不支持ie哦；還有一種方式是css：offset-path: path("M 208 231 C -65 180 -65 28 208 0");好像最兼容的是用translate3d可是麻煩一點，下次能夠更新這個兼容ie的方法哦

差很少就這樣啦。另一個例子中就不說啦。那個和這個同樣，只是少了一個控制點而已哦