svg : polygon & polyline to path 演示
<style>.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>
<svg class="mysvg" width="200" height="200">
<polygon id="Poly" points="100 10, 40 190, 190 120, 180 60"></polygon>
</svg>
<svg class="mysvg" width="200" height="200">
<path id="cPath" d="M10 100 H190"></path>
</svg>
<div id="pathMsg"></div>
<script>
let createPath = (ele) => {
let path = 'M';
let points = Poly.getAttribute('points');
let ar = points.replace(/[^\d.]/g, ',').split(',').filter(Number);
for(j = 0; j < ar.length; j ++) {
if(j <= 1) {
path += ar + ' ';
}else{
path += j % 2 === 0 ? 'L' + ar + ' ' : ar;
}
}
path += ele.tagName.toLowerCase() === 'polygon' ? 'z' : '';
return path;
};
cPath.setAttribute('d',createPath(Poly));
pathMsg.innerText = createPath(Poly);
</script>
polygon 和 polyline 都是 svg 基本图形标签，前者用于绘制多边形，后者绘制折线，二者均使用点集 points 描述元素样式，点集即为{xy}坐标集合。转为 d 路径，实现方法之一是将点集放入数组，然后赋值给M、A（a）指令，polygon 是多边形闭合路径，末尾加个 z 即可。
一楼代码：
<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>
<svg class="mysvg" width="200" height="200">
<polygon id="Poly" points="100 10, 40 190, 190 120, 180 60"></polygon>
</svg>
<svg class="mysvg" width="200" height="200">
<path id="cPath" d="M10 100 H190"></path>
</svg>
<div id="pathMsg"></div>
<script>
let createPath = (ele) => {
let path = 'M';
let points = Poly.getAttribute('points');
let ar = points.replace(/[^\d.]/g, ',').split(',').filter(Number);
for(j = 0; j < ar.length; j ++) {
if(j <= 1) {
path += ar + ' ';
}else{
path += j % 2 === 0 ? 'L' + ar + ' ' : ar;
}
}
path += ele.tagName.toLowerCase() === 'polygon' ? 'z' : '';
return path;
};
cPath.setAttribute('d',createPath(Poly));
pathMsg.innerText = createPath(Poly);
</script>
这个polygon 一下子就看懂了，用 polyline 做路径这个看半天也没明白 。
这4个点最上面的那点是1#，然后逆时针的234吧。 路径里的d="M10 100 H190" 直线是什么意思，任意设的么，然后用数组去替代它？ 数组是从前面的多边形里拿过来的吧。
<div id="pathMsg"></div>这个也没看懂，pathMsg指的是什么？ 那JS看得我晕晕乎乎的，黑黑却是能一挥而就，厉害。黑黑辛苦了{:4_187:} 红影 发表于 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 数据里的第一、二个，所以 ...
看了黑黑的讲解，能看懂一些了，谢谢{:4_187:} 你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学习欣赏模仿！{:4_187:} 红影 发表于 2023-10-1 10:45
哦哦，知道了。
{:4_190:} 红影 发表于 2023-10-1 10:48
这些线条就是点集的具体表现。
{:4_181:} 红影 发表于 2023-10-1 10:49
看了黑黑的讲解，能看懂一些了，谢谢
{:4_180:} 亦是金 发表于 2023-10-1 11:28
你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学 ...
{:4_199:} 马黑黑 发表于 2023-10-1 13:24
问好黑黑，谢茶{:4_187:} 亦是金 发表于 2023-10-1 11:28
你们师徒聊的这么欢，我却是云里雾里的，没有看懂！只能飘过！
请红影做一个其他形状路径的播放器，让我学 ...
线条的非常简单，只是把各个点的坐标写好，就按自己想要的路径走了啊。
黑黑的这个不但用polygon直接生成，也弄了点集赋值的方式，后面这个更难，我还没完全学会{:4_173:} 马黑黑 发表于 2023-10-1 13:25
还是不带JS的这个更简单{:4_173:}