马黑黑 发表于 2023-11-11 23:12

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

<style>
        #sun_flower { background: beige; }
        .segment1, .segment2:hover { fill: azure; stroke: orange; }
        .segment2, .segment1:hover { fill: orange; stroke: orange; }
</style>

<svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600"></svg>

<script>

let gNum = 20;
let ns = 'http://www.w3.org/2000/svg'; /* svg命名空间 */

let path1 = '<path class="segment1" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />',
        path2 = '<path class="segment2" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />';

for(j = 0; j < gNum; j++) {
        let g1 = document.createElementNS(ns, 'g'),
                g2 = document.createElementNS(ns, 'g');

        g1.setAttribute('transform', 'rotate(' + 360 / gNum * j + ')');
        g1.innerHTML = path1;

        g2.setAttribute('transform', 'rotate(' + 360 / gNum * j + ') scale(0.33)');
        g2.innerHTML = path2;

        sun_flower.appendChild(g1);
        sun_flower.appendChild(g2);
}

</script>

马黑黑 发表于 2023-11-11 23:13

代码
<style>
        #sun_flower { background: beige; }
        .segment1, .segment2:hover { fill: azure; stroke: orange; }
        .segment2, .segment1:hover { fill: orange; stroke: orange; }
</style>

<svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600"></svg>

<script>

let gNum = 20;
let ns = 'http://www.w3.org/2000/svg'; /* svg命名空间 */

let path1 = '<path class="segment1" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />',
        path2 = '<path class="segment2" d="M0,0 v-200 a40,40 0 0,0 -62,10 z" />';

for(j = 0; j < gNum; j++) {
        let g1 = document.createElementNS(ns, 'g'),
                g2 = document.createElementNS(ns, 'g');

        g1.setAttribute('transform', 'rotate(' + 360 / gNum * j + ')');
        g1.innerHTML = path1;

        g2.setAttribute('transform', 'rotate(' + 360 / gNum * j + ') scale(0.33)');
        g2.innerHTML = path2;

        sun_flower.appendChild(g1);
        sun_flower.appendChild(g2);
}

</script>

马黑黑 发表于 2023-11-11 23:18

本帖最后由 马黑黑 于 2023-11-11 23:21 编辑

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

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

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

红影 发表于 2023-11-13 12:53

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

红影 发表于 2023-11-13 12:54

JS太强大了，黑黑太强大了{:4_199:}

马黑黑 发表于 2023-11-13 19:11

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

JS存在就是因为这个

马黑黑 发表于 2023-11-13 19:11

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

JS厉害，我一般

红影 发表于 2023-11-14 16:30

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

是啊，有JS十分方便。

红影 发表于 2023-11-14 16:31

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

你会运用厉害的东西，你也厉害啊{:4_187:}

马黑黑 发表于 2023-11-14 18:22

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

我就会用那么一丁点

马黑黑 发表于 2023-11-14 18:24

红影 发表于 2023-11-14 16:30
是啊，有JS十分方便。
JS也曾经被排斥的。微软，凭借它的IE，曾经也弄过自己的一套标准，搞的前端开发苦不堪言，然后，现在吧，微软也放弃了自己的那一套，但是又想来一套别的，但估计也不会有戏了

红影 发表于 2023-11-14 20:44

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

炸弹就算一丁点，力量也大{:4_173:}

红影 发表于 2023-11-14 20:45

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

微软太喜欢做老大了吧。

马黑黑 发表于 2023-11-14 21:29

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

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

马黑黑 发表于 2023-11-14 21:30

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

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

红影 发表于 2023-11-14 22:27

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

炸啥都一样。

红影 发表于 2023-11-14 22:27

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

它落伍了。

马黑黑 发表于 2023-11-15 00:05

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

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

红影 发表于 2023-11-15 15:59

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

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

马黑黑 发表于 2023-11-15 18:08

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

所以微软，历史上，它老是“后知后觉”，比别人慢半步甚至更多投入新的领域，可是多数都是以失败告终
页: [1] 2
查看完整版本: js+svg：mdn花朵示例演示（一）