我试图得到一个梯度应用于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>
