生成svg星形图案path路径的代码
代码：<svg width="200" height="200">
<path id="mypath" d="0 0 L200 200" fill="none" stroke="red" />
</svg>
<p><output id="pathMsg"></output></p>
<script>
let c = 100, r1 = 10, r2 = 95, num = 3;
let points = [];
for(i = 0; i< num; i++) {
let angle = 360 / num * i;
let x1 = (c + Math.cos(angle * Math.PI / 180) * r1).toFixed(2),
y1 = (c + Math.sin(angle * Math.PI / 180) * r1).toFixed(2),
x2 = (c + Math.cos((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2),
y2 = (c + Math.sin((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2);
points.push(, );
}
let d = 'M' + points.join(' ') + 'z';
mypath.setAttribute('d', d);
pathMsg.innerText = d;
</script>变量中，c 是圆心，r1 是内圆半径，r2 是外圆半径，num 是顶点数。这些变量的赋值根据需要而定，合理改变其赋值，会得出不同的效果。
运行代码，可以将代码保存为本地 .html 文档，然后双击打开，也可以到这里 pencil code (52qingyin.cn) 在线运行。
本帖最后由 马黑黑 于 2023-11-9 12:38 编辑
扩展：
如果需要的星形图案是基于椭圆的，则需要将 c 变量分解为 cx1、cy1、cx2、cy2 四个变量，分别对应内圆XY坐标、外圆XY坐标，并将它们对应替代算式的 c 变量 这个代码真好，能直接得到星形路径呢{:4_199:} 通过顶点个数及内外圆的半径，依次计算内外圆上的点，并连接起来，得到星形。很巧妙的设计{:4_199:} 内圆直接对应度数，外圆是再增加一半度数，让点均匀分布在内外圆上。 红影 发表于 2023-11-9 11:13
这个代码真好，能直接得到星形路径呢
Polygon所需的 points 属性值，在前面加个 M 就是path路径的 d 属性值了 红影 发表于 2023-11-9 11:18
内圆直接对应度数，外圆是再增加一半度数，让点均匀分布在内外圆上。
这个应该是容易想到的 红影 发表于 2023-11-9 11:15
通过顶点个数及内外圆的半径，依次计算内外圆上的点，并连接起来，得到星形。很巧妙的设计
这样的设计很简单，我相信用心的人都能想得到 马黑黑 发表于 2023-11-9 08:09
扩展：
如果需要的星形图案是基于椭圆的，则需要将 c 变量分解为 cx1、cy1、cx2、cy2 四个变量，分别对 ...
想做个圆的，做不好{:4_203:} 小辣椒 发表于 2023-11-9 13:28
想做个圆的，做不好
慢慢研究 马黑黑 发表于 2023-11-9 12:36
Polygon所需的 points 属性值，在前面加个 M 就是path路径的 d 属性值了
这个代码很巧妙。 马黑黑 发表于 2023-11-9 12:37
这样的设计很简单，我相信用心的人都能想得到
思路上的确不难{:4_187:} 马黑黑 发表于 2023-11-9 12:36
这个应该是容易想到的
看到了才知道，之前想不到{:4_173:} 红影 发表于 2023-11-9 15:54
看到了才知道，之前想不到
按理应该想到 红影 发表于 2023-11-9 15:52
思路上的确不难
往往，都是简单的思路，做出优秀的产品 红影 发表于 2023-11-9 15:51
这个代码很巧妙。
这是规矩：svg也知道，points 属性的东东，都用L指令是很麻烦的 马黑黑 发表于 2023-11-9 19:31
按理应该想到
哪有那么大本事啊{:4_173:} 马黑黑 发表于 2023-11-9 19:34
往往，都是简单的思路，做出优秀的产品
是啊，能想出来的人非常厉害{:4_187:} 马黑黑 发表于 2023-11-9 19:35
这是规矩：svg也知道，points 属性的东东，都用L指令是很麻烦的
这个JS代码数量不多，很简洁又实用。 红影 发表于 2023-11-9 21:01
这个JS代码数量不多，很简洁又实用。
还好