css - 使用 CSS 的 SVG 渐变

Question

我正在尝试将渐变应用于 SVG rect 元素。

目前，我正在使用 fill 属性。在我的 CSS 文件中:

rect {
    cursor: pointer;
    shape-rendering: crispEdges;
    fill: #a71a2e;
}

并且 rect 元素在浏览器中查看时具有正确的填充颜色。

但是，我想知道是否可以对这个元素应用线性渐变？

Answer 1

只需在 CSS 中使用您将在 fill 属性中使用的任何内容。当然，这需要您在 SVG 中的某处定义线性渐变。

这是一个完整的例子:

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

<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>