js+svg：mdn花朵示例演示（一）

马黑黑

马黑黑

代码

1. <style>
   
2.         #sun_flower { background: beige; }
   
3.         .segment1, .segment2:hover { fill: azure; stroke: orange; }
   
4.         .segment2, .segment1:hover { fill: orange; stroke: orange; }
   
5. </style>
   
6. 
   
7. <svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600"></svg>
   
8. 
   
9. <script>
   
10. 
    
11. let gNum = 20;
    
12. let ns = 'http://www.w3.org/2000/svg'; /* svg命名空间 */
    
13. 
    
14. let path1 = '<path class="segment1" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />',
    
15.         path2 = '<path class="segment2" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />';
    
16. 
    
17. for(j = 0; j < gNum; j++) {
    
18.         let g1 = document.createElementNS(ns, 'g'),
    
19.                 g2 = document.createElementNS(ns, 'g');  
    
20. 
    
21.         g1.setAttribute('transform', 'rotate(' + 360 / gNum * j + ')');
    
22.         g1.innerHTML = path1;
    
23. 
    
24.         g2.setAttribute('transform', 'rotate(' + 360 / gNum * j + ') scale(0.33)');
    
25.         g2.innerHTML = path2;
    
26. 
    
27.         sun_flower.appendChild(g1);
    
28.         sun_flower.appendChild(g2);
    
29. }
    
30. 
    
31. </script>

复制代码

马黑黑

此前发过一个失败的同名帖子。失败原因应该是 svg 的 id 命名问题。

此演示，是 mdn 花朵示例的简化版，意在配套 svg g 分组标签帖子：毕竟吧，写 20 组 g 标签还是挺麻烦的，所以用 js 来完成这个琐细而繁多的工作，同时svg和CSS代码也做了极致精简的改写。

此演示还有后续，主要是，加入svg渐变。敬请期待。

红影

看到前面那个一个个写叶瓣代码，再看看这个，的确简单多了

红影

JS太强大了，黑黑太强大了

马黑黑

红影 发表于 2023-11-13 12:53
看到前面那个一个个写叶瓣代码，再看看这个，的确简单多了

JS存在就是因为这个

马黑黑

红影 发表于 2023-11-13 12:54
JS太强大了，黑黑太强大了

JS厉害，我一般

红影

马黑黑 发表于 2023-11-13 19:11
JS存在就是因为这个

是啊，有JS十分方便。

红影

马黑黑 发表于 2023-11-13 19:11
JS厉害，我一般

你会运用厉害的东西，你也厉害啊

马黑黑

红影 发表于 2023-11-14 16:31
你会运用厉害的东西，你也厉害啊

我就会用那么一丁点

马黑黑

红影 发表于 2023-11-14 16:30
是啊，有JS十分方便。

JS也曾经被排斥的。微软，凭借它的IE，曾经也弄过自己的一套标准，搞的前端开发苦不堪言，然后，现在吧，微软也放弃了自己的那一套，但是又想来一套别的，但估计也不会有戏了

红影

马黑黑 发表于 2023-11-14 18:22
我就会用那么一丁点

炸弹就算一丁点，力量也大

红影

马黑黑 发表于 2023-11-14 18:24
JS也曾经被排斥的。微软，凭借它的IE，曾经也弄过自己的一套标准，搞的前端开发苦不堪言，然后，现在吧， ...

微软太喜欢做老大了吧。

马黑黑

红影 发表于 2023-11-14 20:44
炸弹就算一丁点，力量也大

我不知道炸弹，只知道炸蛋

马黑黑

红影 发表于 2023-11-14 20:45
微软太喜欢做老大了吧。

一向如此，但是，它什么都做不好

红影

马黑黑 发表于 2023-11-14 21:29
我不知道炸弹，只知道炸蛋

炸啥都一样。

红影

马黑黑 发表于 2023-11-14 21:30
一向如此，但是，它什么都做不好

它落伍了。

马黑黑

红影 发表于 2023-11-14 22:27
它落伍了。

只是理念问题。一个人想做老大，往往就会以为自己什么都行。其实一个人行与不行是相对而言的，某些方面性，某些方面不行，不承认就会自讨苦吃。

红影

马黑黑 发表于 2023-11-15 00:05
只是理念问题。一个人想做老大，往往就会以为自己什么都行。其实一个人行与不行是相对而言的，某些方面性 ...

自视太高，以为自己什么都行。其实是不可能的。

马黑黑

红影 发表于 2023-11-15 15:59
自视太高，以为自己什么都行。其实是不可能的。

所以微软，历史上，它老是“后知后觉”，比别人慢半步甚至更多投入新的领域，可是多数都是以失败告终