使用CSS的SVG渐变

我试图获得应用于SVG rect元素的渐变。使用CSS的SVG渐变

目前，我正在使用fill属性。在我的CSS文件中：

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

而rect元素在浏览器中查看时具有正确的填充颜色。

但是，我想知道是否可以将线性渐变应用于此元素？

来源

2012-12-27 Hrishikesh Choudhari

只要在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>

来源

2012-12-27 08:21:45

所以我创建了一个渐变的单独的文件，并使用'fill'这种方式：'fill：url（../ js/gradient.svg＃MyGradient）;'。这是正确的方式吗？ –

@HrishikeshChoudhari：是的，这是正确的，但Chrome和我认为Safari也不支持引用其他文件中的元素。不确定IE9（现在无法测试，只需试一试）。 –

这将在Firefox中起作用，但对我绝望而言，它在Webkit（Safari/Chrome）中不起作用。真是笑话！这是未来... –

-6

下面是如何设定的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>';

来源

2017-03-13 21:22:59 axelparatre

使用CSS的SVG渐变

回答

相关问题