生成svg星形图案path路径的代码

马黑黑

代码：

1. <svg width="200" height="200">
   
2.     <path id="mypath" d="0 0 L200 200" fill="none" stroke="red" />
   
3. </svg>
   
4. <p><output id="pathMsg"></output></p>
   
5. 
   
6. <script>
   
7. let c = 100, r1 = 10, r2 = 95, num = 3;
   
8. let points = [];
   
9. for(i = 0; i< num; i++) {
   
10.     let angle = 360 / num * i;
    
11.     let x1 = (c + Math.cos(angle * Math.PI / 180) * r1).toFixed(2),
    
12.         y1 = (c + Math.sin(angle * Math.PI / 180) * r1).toFixed(2),
    
13.         x2 = (c + Math.cos((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2),
    
14.         y2 = (c + Math.sin((angle + 360 / num / 2) * Math.PI / 180) * r2).toFixed(2);
    
15.     points.push([x1 + ' ' + y1], [x2 + ' ' + y2]);
    
16. }
    
17. let d = 'M' + points.join(' ') + 'z';
    
18. mypath.setAttribute('d', d);
    
19. pathMsg.innerText = d;
    
20. 
    
21. </script>

复制代码

变量中，c 是圆心，r1 是内圆半径，r2 是外圆半径，num 是顶点数。这些变量的赋值根据需要而定，合理改变其赋值，会得出不同的效果。

运行代码，可以将代码保存为本地 .html 文档，然后双击打开，也可以到这里 pencil code (52qingyin.cn) 在线运行。

马黑黑

扩展：

如果需要的星形图案是基于椭圆的，则需要将 c 变量分解为 cx1、cy1、cx2、cy2 四个变量，分别对应内圆XY坐标、外圆XY坐标，并将它们对应替代算式的 c 变量

红影

这个代码真好，能直接得到星形路径呢

红影

通过顶点个数及内外圆的半径，依次计算内外圆上的点，并连接起来，得到星形。很巧妙的设计

红影

内圆直接对应度数，外圆是再增加一半度数，让点均匀分布在内外圆上。

马黑黑

红影 发表于 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 四个变量，分别对 ...

想做个圆的，做不好

马黑黑

小辣椒 发表于 2023-11-9 13:28
想做个圆的，做不好

慢慢研究

红影

马黑黑 发表于 2023-11-9 12:36
Polygon所需的 points 属性值，在前面加个 M 就是path路径的 d 属性值了

这个代码很巧妙。

红影

马黑黑 发表于 2023-11-9 12:37
这样的设计很简单，我相信用心的人都能想得到

思路上的确不难

红影

马黑黑 发表于 2023-11-9 12:36
这个应该是容易想到的

看到了才知道，之前想不到

马黑黑

红影 发表于 2023-11-9 15:54
看到了才知道，之前想不到

按理应该想到

马黑黑

红影 发表于 2023-11-9 15:52
思路上的确不难

往往，都是简单的思路，做出优秀的产品

马黑黑

红影 发表于 2023-11-9 15:51
这个代码很巧妙。

这是规矩：svg也知道，points 属性的东东，都用L指令是很麻烦的

红影

马黑黑 发表于 2023-11-9 19:31
按理应该想到

哪有那么大本事啊

红影

马黑黑 发表于 2023-11-9 19:34
往往，都是简单的思路，做出优秀的产品

是啊，能想出来的人非常厉害

红影

马黑黑 发表于 2023-11-9 19:35
这是规矩：svg也知道，points 属性的东东，都用L指令是很麻烦的

这个JS代码数量不多，很简洁又实用。

马黑黑

红影 发表于 2023-11-9 21:01
这个JS代码数量不多，很简洁又实用。

还好