生成彩虹伞svg代码的脚本
本帖最后由 马黑黑 于 2023-11-23 08:28 编辑以下代码是在原来代码的基础上略作修改，运行后可以生成svg完整代码（生成的代码格式未做处理，如果需要格式化代码请自行整理）：
<div id="svgwrapper">
<svg id="ssvg" width="200" height="200">
<circle id="yuan" cx="150" cy="150" r="5" fill="snow" />
</svg>
</div>
<output id="outData"></output>
<script>
let sepan = () => {
/* 彩虹颜色数组 */
let colors = ['red','orange','yellow','green','cyan','blue','purple'];
/* 获取svg宽高 */
let ww = ssvg.getAttribute('width') || 200,
hh = ssvg.getAttribute('height') || 200;
/* 圆心坐标和圆半径取svg宽高最短边值 */
let c = r =ww > hh ? hh / 2 : ww / 2;
let a = 360 / 7; /* 角度 : 圆周七等分 */
yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */
yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */
/* 用 for 循环依次绘制七个三角形 */
for(j = 0; j < 7; j++) {
let color = colors; /* 取颜色 */
let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */
let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */
/* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */
let x1 = (c + r * Math.cos(Math.PI / 180 * a1)).toFixed(2),
x2 = (c + r * Math.cos(Math.PI / 180 * a2)).toFixed(2),
y1 = (c + -r * Math.sin(Math.PI / 180 * a1)).toFixed(2),
y2 = (c + -r * Math.sin(Math.PI / 180 * a2)).toFixed(2);
/* 创建svg path元素 */
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
/* 设置 path d 路径属性值 */
path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 1 ${x2} ${y2} L${c} ${c}`);
/* 设置 path 填充颜色 */
path.setAttribute('fill', color);
/* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
ssvg.insertBefore(path, yuan);
}
};
sepan();
outData.innerText = '\nsvg代码 : \n' + svgwrapper.innerHTML;
</script>可以到以下链接 pencil code (52qingyin.cn) 运行上述代码。注意根据需要修改 svg 标签的 width 和 height 尺寸，以便获得自己所设计的结果。
以上提供的脚本，本人已亲测多次，运行结果应该没什么问题。 介个能不能画个四叶草{:6_239:} 这个太好了，可以直接生成各种尺寸的小伞，真的太方便了。谢谢黑黑{:4_199:} 是了个600宽高的伞，看着好壮观。这个帖子想做多大就多大，太好了{:4_199:} 还可以是带小数的长宽，这个好，无论想要多大的伞和任何尺寸的伞都能得到了{:4_199:} 幸运草 发表于 2023-11-23 10:48
介个能不能画个四叶草
这个专门画伞 红影 发表于 2023-11-23 11:50
这个太好了，可以直接生成各种尺寸的小伞，真的太方便了。谢谢黑黑
其实也就是代码输出的问题，简单弄一下就行 伞都能画，也能用代码造个美铝吧{:4_189:} 马黑黑 发表于 2023-11-23 12:07
其实也就是代码输出的问题，简单弄一下就行
这个对你来说不难，对我来说完全不会啊{:4_204:} 红影 发表于 2023-11-23 13:17
这个对你来说不难，对我来说完全不会啊
js有两个内置属性，innerText 和 innerHTML，可以处理元素的文本和富文本。
比方说，有两个div，id分别为 div1 和 div2，我们希望在 div2 显示 div1 的代码，可以酱紫：
div2.innerText = div1.innerHTML;
樵歌 发表于 2023-11-23 13:04
伞都能画，也能用代码造个美铝吧
镁铝没有伞长的周正，画起来难度很大 马黑黑 发表于 2023-11-23 13:31
js有两个内置属性，innerText 和 innerHTML，可以处理元素的文本和富文本。
比方说，有两个div，id分 ...
这个很好啊，虽然还没完全弄懂，但知道这个很有用{:4_187:} 红影 发表于 2023-11-23 13:38
这个很好啊，虽然还没完全弄懂，但知道这个很有用
inner，内部的；
text，文本，指纯文本；HTML，这个大家都懂的。
一切都是语义化的 马黑黑 发表于 2023-11-23 20:40
inner，内部的；
text，文本，指纯文本；HTML，这个大家都懂的。
知道它是语义化的，只是不太熟悉呢。 马黑黑 发表于 2023-11-23 12:06
这个专门画伞
我也看不懂{:6_225:} 幸运草 发表于 2023-11-23 21:19
我也看不懂
看懂图片就好 红影 发表于 2023-11-23 20:57
知道它是语义化的，只是不太熟悉呢。
初中英语没学好 马黑黑 发表于 2023-11-23 21:31
初中英语没学好
不是说这个，而是就算写的是汉语，也没弄明白怎么去用它{:4_173:} 马黑黑 发表于 2023-11-23 21:30
看懂图片就好
介个会看哒{:6_231:}