SVG路径填充颜色与CSS

我见过很多人发布这个，他们都似乎很满意他们的答案。SVG路径填充颜色与CSS

但是我不能让我的道路填到实际工作中，

小提琴的正上方，是从Illustrator

HTML

<img src="http://owenmelbourne.com/arrow.svg">

CSS

产生的SVG

img {width: 100px} 
path { 
    fill: blue; 
}

然而，我总是得到 enter image description here

SVG的代码看起来像

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve"> 
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877 
    c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0 
    c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
<g> 
</g> 
</svg>

如果任何人都可以就此事提供一些线索，将不胜感激。

感谢

来源

2013-07-24 Owen

您无法将外部任何CSS应用于引用的SVG文件。移动SVG内的CSS或在HTML中使用内联SVG。 – Sirko

然后它会按照这个答案工作：http://stackoverflow.com/a/9529444/1450420 –

改变填充属性绝不会在这种情况下工作，因为图像本身已经有填充。它不会被使用新属性“替换”或“重新绘制”。

即使您在SVG文件中取出了颜色命令，我也不认为这会起作用。

来源

2013-07-24 09:05:42 usr2564301

SVG路径填充颜色与CSS

回答

相关问题