使用 CSS 将渐变应用于 SVG 元素
在 SVG 矩形元素上实现渐变需要将 CSS 与 SVG 强大的渐变功能结合使用。矩形元素的 fill 属性允许渐变应用。
要创建线性渐变，请将以下 CSS 规则添加到样式表中：
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: url(#MyGradient);
}现在，在 SVG 文件中，定义使用
<defs>
<linearGradient id="MyGradient">
<stop offset="5%" stop-color="#F60" />
<stop offset="95%" stop-color="#FF6" />
</linearGradient>
</defs>这里，渐变沿着元素的长度从 5% 的 #F60 到 95% 的 #FF6。您可以调整颜色和偏移百分比来自定义渐变。
最后，使用 rect 元素中的 fill 属性引用渐变：
<rect width="100" height="50" fill="url(#MyGradient)"/>
这种方法使您能够应用美丽且使用 CSS 对 SVG 元素进行动态渐变，增强 Web 应用程序的视觉吸引力和用户体验。
以上是如何使用 CSS 将渐变应用于 SVG 元素？的详细内容。更多信息请关注PHP中文网其他相关文章！
