使用CSS的SVG渐变

我正在尝试获取应用于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> 

Answer 2

以下是如何在目标元素上设置linearGradient ：

 $output = '<style type="text/css"> path{fill:url(\''.$_SERVER['REQUEST_URI'].'#MyGradient\')} </style> <defs> <linearGradient id="MyGradient"> <stop offset="0%" stop-color="#e4e4e3" ></stop> <stop offset="80%" stop-color="#fff" ></stop> </linearGradient> </defs>';