我正在尝试将渐变应用于 SVG rect
元素。
目前,我正在使用 fill
属性。在我的 CSS 文件中:
rect {
cursor: pointer;
shape-rendering: crispEdges;
fill: #a71a2e;
}
并且 rect
元素在浏览器中查看时具有正确的填充颜色。
但是,我想知道是否可以对这个元素应用线性渐变?
最佳答案
只需在 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>
关于css - 使用 CSS 的 SVG 渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14051351/