请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
SVG径向渐变也称放射性渐变，它对应于CSS的 radial-gradient 但需要在SVG内创建 <radialGradient> 标签，语法如下：
<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" />
<!-- 更多的 <stop> 元素 -->
</radialGradient>
这是由标签构建的径向渐变。<radialGradient> 标签需要设立 id 以便后续其它元素以 fill 或 strok 的方式对之进行引用；cx、cy 是渐变中心点坐标，r 是渐变半径，fx、fy 是可选参数，它们用来定义渐变焦点，产生的作用是控制渐变的形状和方向。<stop> 元素用于指定渐变中的颜色和颜色的位置
本文的重点是 fx 和 fy，可以通过以下实例的代码和演示直观了解 fx、fy 的作用：
<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>
第 3~8 行代码创建了一个 id="grd" 的径向渐变，初始状态 fx、fy 的设置与 cx、cy 一致。第 9 行代码绘制一个圆，填充方式是使用上述创建的径向渐变。运行以上代码可以动态改变 fx、fy 的值，从中可以观察渐变焦点对渐变形状、渐变方向或位置的影响。
| 
发表于 2025-9-19 12:42
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2025-9-19 16:16
楼主
发表于 2025-9-22 20:51
