svgpath路径的作用：svgpath在网页开发中的使用方法

SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。

1. 做路径动画

这个我在《SVG导航下划线光标跟随效果》文后补充介绍了这个实现，最后的效果是这样的：

就可以拿到SVG的代码：

这里比较关键的是path标签里的d属性，d是data的缩写，定义这个路径的形状，它里面可以用很多属性控制形状的变化，如下图所示：

为了实现这个交互，需要动态地改变circle的圆心位置(cx, cy)到路径上相应的地方。SVG没有直接提供相关的API，但是它提供了一个可以间接利用的API叫getPointAtLength，传递一个长度参数，如下代码所示：

let volumnPath = document.querySelector(&＃39;.volumn-path&＃39;);
// 输出path在长度为100的位置的点坐标
console.log(volumnPath.getPointAtLength(100));
// 输出当前path的总长度
console.log(volumnPath.getTotalLength());

控制台输出：

到这里就有思路了，可以把这条路径上每隔一个像素长度就算一下它的坐标在哪里，然后存在一个数组里面。由于鼠标移动的时候x坐标是知道的，就可以查一下在这个数组里面相应x坐标的y坐标是多少，就能得到想要的圆心位置了。

所以先计算一下，保存到一个数组：

let $volumnCOntroller= document.querySelector(&＃39;.volumn-controller&＃39;),
    $volumnPath = $volumnController.querySelector(&＃39;.volumn-path&＃39;);
// 得到当前路径的总长度
let pathTotalLength = $volumnPath.getTotalLength() >> 0;
let points = [];
// 起始位置为长度为0的位置
let startX = Math.round($volumnPath.getPointAtLength(0).x);
// 每隔一个像素距离就保存一下路径上点的坐标
for (let i = 0; i 
这里用一个p0ints数组来保存，它的索引index就为x坐标，值为y坐标。在这个例子里面，总长度为451.5px，得到的points数组长度为388. 你可以隔0.5px长度就保存一个坐标，不过在这个例子里面1px就够了。
然后监听鼠标事件，得到x坐标，查询y坐标，动态地改变circle的圆心位置，如下代码所示：
let $dragButton = $volumnController.querySelector(&＃39;.drag-button&＃39;),
    // 得到起始位置相对当前视窗的位置，相当于jQuery.fn.offset
    dragButtOnPos= $dragButton.getBoundingClientRect();
function movePoint (event) {
    // 当前鼠标的位置减去圆心起始位置就得到移位偏差，12是半径值，这里先直接写死
    let diffX = event.clientX - Math.round(dragButtonPos.left + 12);
    // 需要做个边界判断
    diffX <0 && (diffX = 0);
    diffX >= points.length && (diffX = points.length - 1);
    // startX是在上面的代码得到的长度为0的位置
    $dragButton.setAttribute(&＃39;cx&＃39;, diffX + startX);
    // 使用points数组得到y坐标
    $dragButton.setAttribute(&＃39;cy&＃39;, points[diffX]);
}
$dragButton.addEventListener(&＃39;mousedown&＃39;, function (event) {
    document.addEventListener(&＃39;mousemove&＃39;, movePoint);
});
document.addEventListener(&＃39;mouseup&＃39;, function () {
    document.removeEventListener(&＃39;mousemove&＃39;, movePoint);
});    					
这个实现的代码也是比较简单，需要注意的地方是起始位置的选取，这里有两个坐标系，一个是相对页面的视窗的，它的原点(0, 
0)坐标点是当前页面可视区域（client）的左上角，第二个坐标系是SVG的坐标系，它的原点(0, 0)位置是SVG画布的左上角，如下图所示：
它的实现是hover的时候改变path的d值，然后做d的transition动画，如下代码：

这种变形过渡动画是有条件的，就是它的路径数据格式是要一致的，有多少个M/L/C属性都要保持一致，否则无法做变形动画。
5. 结合clip-path做遮罩效果
使用CSS通常只能用border-radius做一些圆角的遮罩，即用border-radius结合overflow: hidden实现，但是使用clip-path + svg的路径能够做出任意形状遮罩，如下做一个心形的：
如下代码所示：

    

style里面的id: #heart是指向了一个SVG的的clipPath，如下所示：
   					
为了让这个path刚好能撑起div容器宽度的100%，需要设置：
clipPathUnits="objectBoundingBox"
这样会导致d属性里面的单位变成比例的0到1，所以需要把它缩小一下，原本的width是122，height是99，需要需要scale的值为（1 / 122, 1 / 99）。这样就达到100%占满的目的，如果一开始d属性坐标比例就是0到1，就不用这么搞了。
另外clip-path使用svg的path不支持变形动画。
本篇介绍了使用svg路径path做的几种效果：做一个路径动画、不规则形状的点击、沿着路径拖拽、路径的变形动画以及和clip-path做一些遮罩效果。可以说svg的path效果还是很强大的，当你有些效果用html/css无法实现的时候，不妨往svg的方向思考。