如何在 CSS 中将渐变应用于 SVG 矩形？

CSS 中 SVG 渐变

本问题涉及为 SVG 的 元素应用渐变。以下部分将解释如何在 CSS 中实现此功能。

fill 属性的使用

当前，您正在使用 fill 属性为 元素设置纯色。虽然这对于设置单一颜色填充非常有效，但它并不适用于渐变。

使用渐变

要应用线性渐变，您需要使用 url() 函数引用在 SVG 中定义的渐变定义。在 CSS 中，语法如下：

fill: url(#gradient-id);

其中 #gradient-id 是您在 SVG 中为渐变定义的 ID。

示例

以下代码展示了如何为 元素应用线性渐变：

CSS

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

SVG

<svg width="100" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    rect {
      fill: url(#MyGradient);
    }
  </style>
  <defs>
    <linearGradient id="MyGradient">
      <stop offset="5%" stop-color="#F60" />
      <stop offset="95%" stop-color="#FF6" />
    </linearGradient>
  </defs>

  <rect width="100" height="50" />
</svg>

这将创建一个从红色（#F60）到橙色（#FF6）的水平渐变，应用于 元素。

以上是如何在 CSS 中将渐变应用于 SVG 矩形？的详细内容。更多信息请关注PHP中文网其他相关文章！