SVG渐变不起作用

我有一个svg，我需要用渐变填充它，css是通过脚本添加的，如果U使用单RGB颜色工作，那么所有的工作都是罚款，但是使用SVG的渐变结果白色背景。SVG渐变不起作用

剧本后的结果代码：

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
id="Livello_1" x="0px" y="0px" viewBox="0 0 70 70" 
style="enable-background:new 0 0 70 70;width: 50px; height: 50px;" 
xml:space="preserve"> 
<defs> 
    <lineargradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%"> 
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop> 
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop> 
    </lineargradient> 
</defs> 

<path class="st0" d="......" style="fill: url("#grC29M")"> 
</svg>

谢谢！

来源

2016-08-17 MarBer

我认为这只是你需要改变'风格= “填充：URL（” ＃grC29M “）”>'来'风格=“填写：URL（ '＃grC29M' ）“/>'（比较引号，并结束斜线）。 –

@MaxStarkenburg实际上你根本不需要内部引号 –

它的LinearGradient与资本摹
在url内报价无效
路径需要被关闭

既然你没有提供路径的d属性我已经用一个矩形替换了它。

<svg xmlns="http://www.w3.org/2000/svg" 
 
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 70 70" 
 
style="width: 50px; height: 50px;" 
 
xml:space="preserve"> 
 
<defs> 
 
    <linearGradient id="grC29M" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
    <stop offset="0%" style="stop-color:rgb(88,88,88);stop-opacity:1"></stop> 
 
    <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop> 
 
    </linearGradient> 
 
</defs> 
 

 
<rect width="100%" height="100%" style="fill: url(#grC29M)"/> 
 
</svg>

来源

2016-08-17 08:24:41

嗨，谢谢你的回答，SVG由多个路径组成，如果你想我可以插入答案但我认为渐变独立于路径工作结构。相反，在我的jQuery代码中，我写了linearGradient，但在Chrome开发人员工具中都是小写......为什么会这样？ – MarBer

这是一个[Chrome的bug]（http://stackoverflow.com/questions/22341425/chrome-doesnt-respect-camelcase-for-svg-element-clippath） –

最终的解决方案是避免jQuery和设置所有的服务器旁边的PHP。如果任何人必须使用JavaScript或jQuery，并没有其他选择，我建议这篇文章[链接]（http://stackoverflow.com/questions/10894377/dynamically-adding-a-svg-gradient）。感谢@Robert Longson的编辑答案和帮助。 – MarBer

SVG渐变不起作用

回答

相关问题