svg : polygon & polyline to path 演示

马黑黑

马黑黑

polygon 和 polyline 都是 svg 基本图形标签，前者用于绘制多边形，后者绘制折线，二者均使用点集 points 描述元素样式，点集即为{xy}坐标集合。转为 d 路径，实现方法之一是将点集放入数组，然后赋值给M、A（a）指令，polygon 是多边形闭合路径，末尾加个 z 即可。


一楼代码：

1. <style>
   
2. .mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
   
3. </style>
   
4. 
   
5. <svg class="mysvg" width="200" height="200">
   
6.         <polygon id="Poly" points="100 10, 40 190, 190 120, 180 60"></polygon>
   
7. </svg>
   
8. <svg class="mysvg" width="200" height="200">
   
9.         <path id="cPath" d="M10 100 H190"></path>
   
10. </svg>
    
11. <div id="pathMsg"></div>
    
12. 
    
13. <script>
    
14. 
    
15. let createPath = (ele) => {
    
16.         let path = 'M';
    
17.         let points = Poly.getAttribute('points');
    
18.         let ar = points.replace(/[^\d.]/g, ',').split(',').filter(Number);
    
19.         for(j = 0; j < ar.length; j ++) {
    
20.                 if(j <= 1) {
    
21.                         path += ar[j] + ' ';
    
22.                 }else{
    
23.                         path += j % 2 === 0 ? 'L' + ar[j] + ' ' : ar[j];
    
24.                 }
    
25.         }
    
26.         path += ele.tagName.toLowerCase() === 'polygon' ? 'z' : '';
    
27.         return path;
    
28. };
    
29. 
    
30. cPath.setAttribute('d',createPath(Poly));
    
31. pathMsg.innerText = createPath(Poly);
    
32. 
    
33. </script>

复制代码

红影

这个polygon 一下子就看懂了，用 polyline 做路径这个看半天也没明白 。
这4个点最上面的那点是1#，然后逆时针的234吧。

红影

路径里的d="M10 100 H190" 直线是什么意思，任意设的么，然后用数组去替代它？

红影

数组是从前面的多边形里拿过来的吧。
<div id="pathMsg"></div>这个也没看懂，pathMsg指的是什么？

红影

那JS看得我晕晕乎乎的，黑黑却是能一挥而就，厉害。黑黑辛苦了

马黑黑

红影 发表于 2023-10-1 09:01
这个polygon 一下子就看懂了，用 polyline 做路径这个看半天也没明白 。
这4个点最上面的那点是1#，然后逆 ...

这是根据polygon的点集（points）顺序布局的，polygon怎么设计，路径怎么来

马黑黑

红影 发表于 2023-10-1 09:03
路径里的d="M10 100 H190" 直线是什么意思，任意设的么，然后用数组去替代它？

根据polygon和polyline的点集特性，使用 L 指令去画线最合适。每一个点集都是一组 {x,y} 坐标值，正好对应 L 指令所需要的 {x,y} 坐标

马黑黑

红影 发表于 2023-10-1 09:11
那JS看得我晕晕乎乎的，黑黑却是能一挥而就，厉害。黑黑辛苦了

这只不过是一个for循环，循环过程中，要给 M 赋值，M 需要的点集数据是 points 数据里的第一、二个，所以要做一个判断；往后，步进变量 j 若被 2 整除，则它是 {xy} 点集数据中的 x，反之是 y，这样就能赋值给 L 指令。仅此而已，一个简单的算法。

至于将 points 数据压进数组 ar，这需要一点点小技巧，一是使用正则表达式匹配数字（含浮点数），/[^\d.]/g 这个就是正则表达式，二是要确保点集里的数据都是数字，所以又用了 filter(Number) 进行过滤，将不是数字的东东剔除掉。

红影

马黑黑 发表于 2023-10-1 10:21
这是根据polygon的点集（points）顺序布局的，polygon怎么设计，路径怎么来

哦哦，知道了。

红影

马黑黑 发表于 2023-10-1 10:23
根据polygon和polyline的点集特性，使用 L 指令去画线最合适。每一个点集都是一组 {x,y} 坐标值，正好对 ...

这些线条就是点集的具体表现。

红影

马黑黑 发表于 2023-10-1 10:30
这只不过是一个for循环，循环过程中，要给 M 赋值，M 需要的点集数据是 points 数据里的第一、二个，所以 ...

看了黑黑的讲解，能看懂一些了，谢谢

亦是金

你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学习欣赏模仿！

马黑黑

红影 发表于 2023-10-1 10:45
哦哦，知道了。

马黑黑

红影 发表于 2023-10-1 10:48
这些线条就是点集的具体表现。

马黑黑

红影 发表于 2023-10-1 10:49
看了黑黑的讲解，能看懂一些了，谢谢

马黑黑

亦是金 发表于 2023-10-1 11:28
你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学 ...

红影

马黑黑 发表于 2023-10-1 13:24

问好黑黑，谢茶

红影

亦是金 发表于 2023-10-1 11:28
你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学 ...

线条的非常简单，只是把各个点的坐标写好，就按自己想要的路径走了啊。
黑黑的这个不但用polygon直接生成，也弄了点集赋值的方式，后面这个更难，我还没完全学会

红影

马黑黑 发表于 2023-10-1 13:25

还是不带JS的这个更简单