生成彩虹伞svg代码的脚本

马黑黑

以下代码是在原来代码的基础上略作修改，运行后可以生成svg完整代码（生成的代码格式未做处理，如果需要格式化代码请自行整理）：

1. <div id="svgwrapper">
   
2.     <svg id="ssvg" width="200" height="200">
   
3.         <circle id="yuan" cx="150" cy="150" r="5" fill="snow" />
   
4.     </svg>
   
5.     </div>
   
6. <output id="outData"></output>
   
7. 
   
8. <script>
   
9. 
   
10. let sepan = () => {
    
11.     /* 彩虹颜色数组 */
    
12.     let colors = ['red','orange','yellow','green','cyan','blue','purple'];
    
13.     /* 获取svg宽高 */
    
14.     let ww = ssvg.getAttribute('width') || 200,
    
15.         hh = ssvg.getAttribute('height') || 200;
    
16.     /* 圆心坐标和圆半径取svg宽高最短边值 */
    
17.     let c = r =  ww > hh ? hh / 2 : ww / 2;
    
18.     let a = 360 / 7; /* 角度 : 圆周七等分 */
    
19.     yuan.setAttribute('cx',c); /* 小圆点圆心X坐标 */
    
20.     yuan.setAttribute('cy',c); /* 小圆点圆心Y坐标 */
    
21.     /* 用 for 循环依次绘制七个三角形 */
    
22.     for(j = 0; j < 7; j++) {
    
23.         let color = colors[j]; /* 取颜色 */
    
24.         let a1 = a * j; /* 三角形等腰边1与圆周交点的角度 */
    
25.         let a2 = a1 + a; /* 三角形等腰边2与圆周交点的角度 */
    
26.         /* 下面使用余弦正弦函数分别获取交点1和交点2的XY坐标值 */
    
27.         let x1 = (c + r * Math.cos(Math.PI / 180 * a1)).toFixed(2),
    
28.             x2 = (c + r * Math.cos(Math.PI / 180 * a2)).toFixed(2),
    
29.             y1 = (c + -r * Math.sin(Math.PI / 180 * a1)).toFixed(2),
    
30.             y2 = (c + -r * Math.sin(Math.PI / 180 * a2)).toFixed(2);
    
31.         /* 创建svg path元素 */
    
32.         let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    
33.         /* 设置 path d 路径属性值 */
    
34.         path.setAttribute('d', `M ${c} ${c} L${x1} ${y1} A ${c} ${c} 0 0 1 ${x2} ${y2} L${c} ${c}`);
    
35.         /* 设置 path 填充颜色 */
    
36.         path.setAttribute('fill', color);
    
37.         /* 将 path 添加到 id="yuan" 的circle的前面（放后面圆点会被覆盖） */
    
38.         ssvg.insertBefore(path, yuan);
    
39.     }
    
40. };
    
41. 
    
42. sepan();
    
43. 
    
44. outData.innerText = '\nsvg代码 : \n' + svgwrapper.innerHTML;
    
45. 
    
46. </script>

复制代码

可以到以下链接 pencil code (52qingyin.cn) 运行上述代码。注意根据需要修改 svg 标签的 width 和 height 尺寸，以便获得自己所设计的结果。

马黑黑

以上提供的脚本，本人已亲测多次，运行结果应该没什么问题。

幸运草

介个能不能画个四叶草

红影

这个太好了，可以直接生成各种尺寸的小伞，真的太方便了。谢谢黑黑

红影

是了个600宽高的伞，看着好壮观。这个帖子想做多大就多大，太好了

红影

还可以是带小数的长宽，这个好，无论想要多大的伞和任何尺寸的伞都能得到了

马黑黑

幸运草 发表于 2023-11-23 10:48
介个能不能画个四叶草

这个专门画伞

马黑黑

红影 发表于 2023-11-23 11:50
这个太好了，可以直接生成各种尺寸的小伞，真的太方便了。谢谢黑黑

其实也就是代码输出的问题，简单弄一下就行

樵歌

伞都能画，也能用代码造个美铝吧

红影

马黑黑 发表于 2023-11-23 12:07
其实也就是代码输出的问题，简单弄一下就行

这个对你来说不难，对我来说完全不会啊

马黑黑

红影 发表于 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分 ...

这个很好啊，虽然还没完全弄懂，但知道这个很有用

马黑黑

红影 发表于 2023-11-23 13:38
这个很好啊，虽然还没完全弄懂，但知道这个很有用

inner，内部的；

text，文本，指纯文本；HTML，这个大家都懂的。

一切都是语义化的

红影

马黑黑 发表于 2023-11-23 20:40
inner，内部的；

text，文本，指纯文本；HTML，这个大家都懂的。

知道它是语义化的，只是不太熟悉呢。

幸运草

马黑黑 发表于 2023-11-23 12:06
这个专门画伞

我也看不懂

马黑黑

幸运草 发表于 2023-11-23 21:19
我也看不懂

看懂图片就好

马黑黑

红影 发表于 2023-11-23 20:57
知道它是语义化的，只是不太熟悉呢。

初中英语没学好

红影

马黑黑 发表于 2023-11-23 21:31
初中英语没学好

不是说这个，而是就算写的是汉语，也没弄明白怎么去用它

幸运草

马黑黑 发表于 2023-11-23 21:30
看懂图片就好

介个会看哒