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

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 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，让渲染出来的效果更理想。

其他内容未做改变。