SVG渐变使用CSS [英] SVG gradient using CSS

问题描述

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

I'm trying to get a gradient applied to an SVG rect element.

m使用 fill 属性。在我的CSS文件中：

Currently, I'm using the fill attribute. In my CSS file:

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

而 rect

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

However, I'd like to know if I can apply a linear gradient to this element?

推荐答案

只需在CSS中使用在 fill 属性中使用的内容。
当然，这需要你在你的SVG中定义了线性渐变。

Just use in the CSS whatever you would use in a fill attribute. Of course, this requires that you have defined the linear gradient somewhere in your 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>

这篇关于SVG渐变使用CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！