如何使用 CSS 将渐变应用于 SVG 元素？

使用 CSS 将渐变应用于 SVG 元素

在 SVG 矩形元素上实现渐变需要将 CSS 与 SVG 强大的渐变功能结合使用。矩形元素的 fill 属性允许渐变应用。

要创建线性渐变，请将以下 CSS 规则添加到样式表中：

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: url(#MyGradient);
}

现在，在 SVG 文件中，定义使用 的线性梯度和 elements:

<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中文网其他相关文章！