SVG路径的基本概念
SVG是画矢量图的好帮手！用path标签就可以随心所欲地画出各种形状。跟HTML+CSS比起来，SVG路径更加自由自在，能搞出很多普通方法做不到的东西。在做网站时，只要巧妙运用SVG path，你的网站就会变得个性十足，趣味横生~
简单说，SVG中的路径就是一套命令，能操纵图片的起点终点，甚至连弧度、线条形状都能搞定。你们设计师和程序员得明白这玩意儿多重要，还能让你的网站看起来炫酷！
利用SVG路径实现交互效果
网上冲浪时，我们常常和网页互动。SVG路径的作用就大！可以让画面动起来~比如，当你点击SVG路径上的某个地方，它就能产生变化，使用起来挺有趣，实用性也强，不仅好用还好玩！
差点忘了告诉你，SVG里还有个叫isPointInFill的API。虽然操作起来有点小复杂，但肯定比守在点击事件方便多。用好了，也可以做出很有感觉的直观界面。
实现沿着路径拖拽效果
你懂吗？除了那些简单的”点一下”、”判断”之类的程序，我们还得做更多酷炫的效果！比如说，你觉得可以让人们拉着元素跑吗？具体做法很简单：首先算出SVG路径中每一个点的位置，然后根据鼠标停下的地方，随时调整元素的位置就行了。
你知道吗？路径标签里的那个“d”属性控制着路径的样子，你还能用它来搞形状变化。更神奇的是，我们还可以通过“getPointAtLength”这类API来得到沿途的精准位置信息哟。有了这个，再配上鼠标事件监听和算算坐标位置这种小技巧，就可以让元素沿着预定的路线灵活走动！
处理复杂路径及优化算法
有好多弯弯曲曲的线呀,还有各种相似点。所以我们得学会怎么算这些东西。就是看每个像素在哪根线上，再挑个离鼠标最近的，你就知道要动哪个地方。
咱解决这类问题时得搞个算法优化，让它跑得快些、有效率些；还得确保答案对了，挺实用的。有许多代码示例教咱们，还有像Codepen这样的网站，学起来轻松捞！
let volumnPath = document.querySelector('.volumn-path');
// 输出path在长度为100的位置的点坐标
console.log(volumnPath.getPointAtLength(100));
// 输出当前path的总长度
console.log(volumnPath.getTotalLength());
结合关键帧创建动画效果
除了静态页面，网页设计中加入动画效果也是不错的选择，让界面变得更加生动有趣。运用SVG路径和关键帧技术，轻松实现炫酷的动画制作！
比如说，如果你把鼠标放在路径上晃荡几下，再搞点动画效果，那图形变幻就好玩多了！记住别忘了维持统一的路径数据格式，这样才能好看又流畅。
使用SVG路径做遮罩效果
网页设计中，经常需要用到遮罩，这样才能让某些部分更突出或者视觉效果更好看。之前我们常常用CSS的 border-radius 和 overflow: hidden，就可以简单地做出圆弧状的遮罩！
用clip-path和SVG路径来当遮罩，就能随心所欲创造各种形状，比如说那个炫酷的心脏形遮罩也是手到擒来。这样不仅能用实力证明SVG路径在界面设计上的强大之处，还能让我们发挥无尽创意~
总结与展望
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);
}
实际上，懂得如何使用好SVG路径制作网站会让你受益良多。不论是从基础知识还是高阶技巧，比如说搞个互动或者动画啥的，或是用它来弄个遮罩效果什么的，SVG路径都能帮上忙！
不管怎样，现在看来，随着网络科技飞速发展，未来的SVG路径会大展身手，让网页设计和建设变得更加酷炫有看头！
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 = 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);
});
SVG路径就说到这儿，赶紧利用起来解决你遇到的问题~
。
评论0