我试图得到一个梯度应用于SVG rect元素。
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}
当在浏览器中查看时，rect元素具有正确的填充颜色。
但是，我想知道如果我可以应用线性渐变这个元素？
解决方法
只需在CSS中使用，您将在填充属性中使用。
当然，这需要你在你的SVG中定义了线性渐变。
当然，这需要你在你的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>
