svgpath在网页开发中如何使用

这篇文章主要介绍了svg path在网页开发中如何使用，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创新互联专注于企业营销型网站、网站重做改版、驻马店网站定制设计、自适应品牌网站建设、H5场景定制、商城网站定制开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为驻马店等各大城市提供网站开发制作服务。

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

1. 做路径动画

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

svg path在网页开发中如何使用

实现代码如下：

svg path在网页开发中如何使用

利用animateMotion结合path做的动画，具体说明可见上文。

2. 实现不规则形状的点击

如下图所示，需要实现点到哪个洲就进入哪个洲的效果，例如点到非洲就进入非洲：

svg path在网页开发中如何使用

我们可以用div定一个框盖在非洲的上面，但是用div的话只能是规则的四方形，没办法实现点到非洲大陆的时候才进入，但是大陆的轮廓又是不规则的，所以用传统html是不能解决这个问题的。但是用SVG的path可以解决这个问题，方法1是监听path的点击事件即可，如下图所示：

svg path在网页开发中如何使用

因为这个轮廓可以跟UI要到，他们一般都是用AI/PS等矢量软件画出来的，让他们导一个SVG给你就好了。

方法2是可以调SVG的isPointInFill这个API判断点击的点是否在Path的fill区域里面，这个也可以实现，但是相对于方法1来说比较麻烦，因为还需要把鼠标的位置转换为svg视图的位置。

3. 沿着路径拖拽的交互

在第1点沿着路径的动画是自动的过程，有没有办法让用户自己拖拽过去呢，实现如下效果：

svg path在网页开发中如何使用

这种的场景有音量控制等需要有百分比控制的。可以先用一个SVG的在线工具画出一个这样的图形：

svg path在网页开发中如何使用

就可以拿到SVG的代码：

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

svg path在网页开发中如何使用

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

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

控制台输出：

svg path在网页开发中如何使用

把circle的cx/cy改成上面的x/y坐标，圆圈就会跑到对应的位置去了：

svg path在网页开发中如何使用

这里的问题在于这个API传递的length参数是相对于曲线长度的，但是鼠标移动的位置是线性的，没办法直接知道当前鼠标在曲线上距离起始位置多少。

所以需要算一下，在这个场景里面我们可以取鼠标的x坐标在曲线上对应的位置就可以了，如下图示意：

svg path在网页开发中如何使用

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

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

let $volumnController = document.querySelector('.volumn-controller'),
    $volumnPath = $volumnController.querySelector('.volumn-path');
// 得到当前路径的总长度
let pathTotalLength = $volumnPath.getTotalLength() >> 0;
let points = [];
// 起始位置为长度为0的位置
let startX = Math.round($volumnPath.getPointAtLength(0).x);
// 每隔一个像素距离就保存一下路径上点的坐标
for (let i = 0; i < pathTotalLength; i++) {
    let p = $volumnPath.getPointAtLength(i);
    // 保存的坐标用四舍五入，可以平衡误差
    points[Math.round(p.x) - startX] = Math.round(p.y);
}

这里用一个p0ints数组来保存，它的索引index就为x坐标，值为y坐标。在这个例子里面，总长度为451.5px，得到的points数组长度为388. 你可以隔0.5px长度就保存一个坐标，不过在这个例子里面1px就够了。

然后监听鼠标事件，得到x坐标，查询y坐标，动态地改变circle的圆心位置，如下代码所示：

let $dragButton = $volumnController.querySelector('.drag-button'),
    // 得到起始位置相对当前视窗的位置，相当于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('cx', diffX + startX);
    // 使用points数组得到y坐标
    $dragButton.setAttribute('cy', points[diffX]);
}
$dragButton.addEventListener('mousedown', function (event) {
    document.addEventListener('mousemove', movePoint);
});
document.addEventListener('mouseup', function () {
    document.removeEventListener('mousemove', movePoint);
});

这个实现的代码也是比较简单，需要注意的地方是起始位置的选取，这里有两个坐标系，一个是相对页面的视窗的，它的原点(0, 0)坐标点是当前页面可视区域（client）的左上角，第二个坐标系是SVG的坐标系，它的原点(0, 0)位置是SVG画布的左上角，如下图所示：

svg path在网页开发中如何使用

鼠标的位置是相对于视图client的，所以需要得到圆圈在client的位置，可以通过原生的getBoundingClient获取，然后用鼠标的clientX减掉圆圈的clientX就得到正确的位移偏差diff了，这个diff值加上圆圏的在svg坐标的起始位置就能得到svg里的x坐标了，然后去查一下points数组就能得到y坐标，然后去设置circle的cx/cy值。

这个的实现已经算是十分简单的，大概30行代码。需要注意的是如果svg缩放了，那么坐标也要相应比例地改一下。所以最好是不要缩放，1：1显示就简单多了。

如果要显示具体的音量值呢？这个也好办，只需要在第一步保存点坐标的时候把在路径上的长度也保存下来就好了，最后效果如下：

svg path在网页开发中如何使用