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

回答

相關問題