在线生成svg星形图案及path路径

马黑黑

运行以下代码可以生成星形图案和图案的 path 路径，可以在线修改：① 行1的svg宽高；② 行7的圆心 c、大小圆半径 r1 和 r2、顶点数 num 和初始角度偏移量 angpy 制作自己所需要的图案。

<svg width="200" height="200">
    <path id="mypath" d="M0 0 L200 200" fill="none" stroke="red" />
</svg>
<p><output id="pathMsg"></output></p>

<script>
let c = 100, r1 = 10, r2 = 95, num = 3, angpy = 0;
let points = [];
for(i = 0; i< num; i++) {
    let angle = 360 / num * i + angpy;
    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([x1 + ' ' + y1], [x2 + ' ' + y2]);
}
let d = 'M' + points.join(',') + 'z';
mypath.setAttribute('d', d);
pathMsg.innerText = '路径：' + d;

</script>

运行代码

马黑黑

【提示】

双击或两击红色的数字，数字会被全选，方便修改。
双击和两击是不尽一样的点击概念。一般而言，双击，两次点击的速度较快，一气呵成；两击，两次点击直接有一定的时间间隔、动作相对从容。

针对一楼红色数字的操作，任何时候，双击都可全选文本；在红色文本获得了焦点的前提下，两击亦可全选文本。

马黑黑

醉美水芙蓉 发表于 2023-11-10 12:06
黑黑老师中午好！欣赏学习老师教程！

感谢支持

小辣椒

黑黑这个可以自己调节修改尺寸，仔细看看明白了一点，可以自己做路径效果

小辣椒

这个就只能做单线图形码

马黑黑

小辣椒 发表于 2023-11-10 18:15
这个就只能做单线图形码

自由路径播放器插件使用的是单路径，就是只有一个 M

马黑黑

小辣椒 发表于 2023-11-10 18:14
黑黑这个可以自己调节修改尺寸，仔细看看明白了一点，可以自己做路径效果

是的。svg的宽高和两个圆的圆心、半径相配套就好

小辣椒

马黑黑 发表于 2023-11-10 19:23
自由路径播放器插件使用的是单路径，就是只有一个 M

哦，这个可以自己画线制作路径

小辣椒

马黑黑 发表于 2023-11-10 19:24
是的。svg的宽高和两个圆的圆心、半径相配套就好

这个我感觉可以看懂了

马黑黑

小辣椒 发表于 2023-11-10 21:00
这个我感觉可以看懂了

马黑黑

小辣椒 发表于 2023-11-10 21:00
哦，这个可以自己画线制作路径

那挺好

红影

这个在线生成svg星形图案的帖子好，能直接看效果，还能很方便地修改数据。十分完美的互动帖子

红影

内外圆两个圆，就可以生成svg星型路径，这个真好

马黑黑

红影 发表于 2023-11-12 21:56
这个在线生成svg星形图案的帖子好，能直接看效果，还能很方便地修改数据。十分完美的互动帖子

晚上嚎

马黑黑

红影 发表于 2023-11-12 22:00
内外圆两个圆，就可以生成svg星型路径，这个真好

红影

马黑黑 发表于 2023-11-12 22:31
晚上嚎

一起嚎

红影

马黑黑 发表于 2023-11-12 22:31

黑黑自己设计的星形，厉害

马黑黑

红影 发表于 2023-11-13 21:22
黑黑自己设计的星形，厉害

我觉得，值得嘚瑟的地方是，代码太少了

马黑黑

红影 发表于 2023-11-13 21:21
一起嚎

嚎嚎更健康