马黑黑 发表于 2023-11-12 17:10

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

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

<svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600">
        <defs>
                <radialGradient id="rGradient" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse">
                        <stop offset="30%" stop -color="lightblue" stop-opacity="0.2" />
                        <stop offset="100%" stop-color="azure" stop-opacity="1" />
                </radialGradient>
        </defs>
</svg>

<script>

let gNum = 20;
let ns = 'http://www.w3.org/2000/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-12 17:11

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

<svg id="sun_flower" width="600" height="600" viewBox="-300 -300 600 600">
        <defs>
                <radialGradient id="rGradient" cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse">
                        <stop offset="30%" stop -color="lightblue" stop-opacity="0.2" />
                        <stop offset="100%" stop-color="azure" stop-opacity="1" />
                </radialGradient>
        </defs>
</svg>

<script>

let gNum = 20;
let ns = 'http://www.w3.org/2000/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-12 17:20

这个，和演示（一）的区别在于有无svg渐变，（一）没有，（二）加入了radialGradient渐变。

08~13行，定义一组径向渐变。radialGradient 使用了 gradientUnits 属性，旨在使用用户空间单位（默认px像素）。这是因为，渐变针对的是花瓣，花瓣个体是长条形的，径向渐变要能作用于它，需要指定详细的位置和较大的半径，故此，cx="0" cy="0" 表示渐变中心在花瓣的左上角，r="200"定义的放射范围应该足以覆盖全花瓣个体；两种参与渐变的颜色，第一种透明度为 0.2，让渲染出来的效果更理想。

其他内容未做改变。

樵歌 发表于 2023-11-12 18:47

特号喇叭花。{:4_189:}

马黑黑 发表于 2023-11-12 19:17

樵歌 发表于 2023-11-12 18:47
特号喇叭花。

像不像呢

小辣椒 发表于 2023-11-12 19:41

黑黑，这个花中间背景颜色深一点，是加了滤镜效果？

小辣椒 发表于 2023-11-12 19:41

小辣椒对这个还是不够了解，要再仔细学习一下

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

小辣椒 发表于 2023-11-12 19:41
黑黑，这个花中间背景颜色深一点，是加了滤镜效果？

不是滤镜，这个，有两组旋转的花瓣，内圆的花瓣颜色设那个样纸。

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

小辣椒 发表于 2023-11-12 19:41
小辣椒对这个还是不够了解，要再仔细学习一下

这个，svg里只有一个渐变代码，花瓣是由JS生成

红影 发表于 2023-11-13 13:56

这个渐变色加上后好漂亮，真的像一朵花儿{:4_187:}

红影 发表于 2023-11-13 13:57

这个是完全黑黑自己的 设计，给黑黑点赞{:4_199:}

红影 发表于 2023-11-13 13:58

这个和最开始的那个比起来，好像小圆上的花瓣没错位？

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

红影 发表于 2023-11-13 13:58
这个和最开始的那个比起来，好像小圆上的花瓣没错位？

为什么要错位？

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

红影 发表于 2023-11-13 13:57
这个是完全黑黑自己的 设计，给黑黑点赞

谢谢

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

红影 发表于 2023-11-13 13:56
这个渐变色加上后好漂亮，真的像一朵花儿

也不是很像

樵歌 发表于 2023-11-13 19:53

马黑黑 发表于 2023-11-12 19:17
像不像呢

像

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

樵歌 发表于 2023-11-13 19:53
像

{:4_191:}

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

马黑黑 发表于 2023-11-13 19:07
为什么要错位？

不是必须，而是说两者的不同之处。{:4_173:}

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

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

黑黑是钻研型的人才，厉害{:4_187:}

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

马黑黑 发表于 2023-11-13 19:08
也不是很像

还是很漂亮的呢{:4_187:}
页: [1] 2 3 4
查看完整版本: js+svg：mdn花朵示例演示（二）