svg径向渐变参数 fx/fy 演示
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>SVG径向渐变也称放射性渐变，它对应于CSS的 radial-gradient 但需要在SVG内创建 <txt-red><radialGradient></txt-red> 标签，语法如下：</p>
<div class="codebox">
<radialGradient id="gradient_id" cx="cx" cy="cy" r="r" fx="fx" fy="fy">
<stop offset="offset1" stop-color="color1" />
<stop offset="offset2" stop-color="color2" />
<txt-green><!-- 更多的 <stop> 元素 --></txt-green>
</radialGradient>
</div>
<p>这是由标签构建的径向渐变。<txt-red><radialGradient></txt-red> 标签需要设立 id 以便后续其它元素以 fill 或 strok 的方式对之进行引用；cx、cy 是渐变中心点坐标，r 是渐变半径，<txt-red>fx</txt-red>、<txt-red>fy</txt-red> 是可选参数，它们用来定义渐变焦点，产生的作用是控制渐变的形状和方向。<txt-red><stop></txt-red> 元素用于指定渐变中的颜色和颜色的位置</p>
<p>本文的重点是 <txt-red>fx</txt-red> 和 <txt-red>fy</txt-red>，可以通过以下实例的代码和演示直观了解 <txt-red>fx</txt-red>、<txt-red>fy</txt-red> 的作用：</p>
<div class="codebox" data-prev="1">
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" viewBox="-200 -200 400 400">
<defs>
<radialGradient id="grd" cx="0.5" cy="0.5" r="0.5" fx="0.5" fy="0.5">
<stop offset="0%" stop-color="black"></stop>
<stop offset="50%" stop-color="white"></stop>
<stop offset="100" stop-color="skyblue"></stop>
</radialGradient>
</defs>
<circle cx="0" cy="0" r="190" fill="url(#grd)" />
</svg>
<p>
<label for="rangeFx"> fx : </label>
<input id="rangeFx" type="range" min="0" max="1" value="0.5" step="0.01" />
<output id="outputFx">0.5</output>
</p>
<p>
<label for="rangeFy"> fy : </label>
<input id="rangeFy" type="range" min="0" max="1" value="0.5" step="0.01" />
<output id="outputFy">0.5</output>
</p>
<script>
const fxfy = () => {
grd.setAttribute('fx', rangeFx.value);
grd.setAttribute('fy', rangeFy.value);
outputFx.value = rangeFx.value;
outputFy.value = rangeFy.value;
};
rangeFx.oninput = () => fxfy();
rangeFy.oninput = () => fxfy();
</script>
</div>
<p>第 3~8 行代码创建了一个 id="grd" 的径向渐变，初始状态 <txt-red>fx</txt-red>、<txt-red>fy</txt-red> 的设置与 cx、cy 一致。第 9 行代码绘制一个圆，填充方式是使用上述创建的径向渐变。运行以上代码可以动态改变 <txt-red>fx</txt-red>、<txt-red>fy</txt-red> 的值，从中可以观察渐变焦点对渐变形状、渐变方向或位置的影响。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 原来除了有渐变中心，还有渐变焦点。
马上要出去了，等回来再仔细学习{:4_187:} svg径向渐变是又一个新知识点，谢谢马老师经典讲授与演示{:4_190:} 杨帆 发表于 2025-9-19 16:16
svg径向渐变是又一个新知识点，谢谢马老师经典讲授与演示
应该有讲过，只是可能没做演示 红影 发表于 2025-9-19 13:21
原来除了有渐变中心，还有渐变焦点。
马上要出去了，等回来再仔细学习
之前应该介绍过的 马黑黑 发表于 2025-9-19 18:03
之前应该介绍过的
嗯嗯，有这感觉的，其实就是渲染中心吧。{:4_204:} 红影 发表于 2025-9-19 23:22
嗯嗯，有这感觉的，其实就是渲染中心吧。
svg中的径向渐变焦点，性质上有点特殊，不完全是设置渲染中心 马黑黑 发表于 2025-9-20 19:25
svg中的径向渐变焦点，性质上有点特殊，不完全是设置渲染中心
其他的我也弄不懂了，就模糊地按这个理解了。 红影 发表于 2025-9-21 07:08
其他的我也弄不懂了，就模糊地按这个理解了。
也成 马黑黑 发表于 2025-9-21 09:50
也成
反正大错不错的。 红影 发表于 2025-9-21 19:19
反正大错不错的。
就是，差不多 马黑黑 发表于 2025-9-21 19:23
就是，差不多
让我理解得再深我也理解不来了{:4_173:} 红影 发表于 2025-9-21 20:24
让我理解得再深我也理解不来了
一般般就可以了 马黑黑 发表于 2025-9-21 21:46
一般般就可以了
嗯嗯，只能这样。 红影 发表于 2025-9-21 22:44
嗯嗯，只能这样。
知足常乐 这个渐变聚焦位置，之前在回家那个贴子里有出现过，当时还有点纳闷。。现在知道了是渐变聚焦的地方，如果位置改变，花的形状也会改变。。。
渐变聚焦位置可以任意改变，并不是之前想象的固定于中心点。。{:4_199:} 有实例有演示。。。对小白太友好了。。
瓜唧瓜唧。。。。掌声响起来。。。。 马黑黑 发表于 2025-9-21 23:29
知足常乐
能乐就乐。{:4_173:} 红影 发表于 2025-9-22 21:20
能乐就乐。
不乐白不乐 花飞飞 发表于 2025-9-22 20:52
有实例有演示。。。对小白太友好了。。
瓜唧瓜唧。。。。掌声响起来。。。。
不敲黑板吗