將填充（顏色）應用於SVG圖像

我一直試圖使用fill對svg應用不同的顏色，但沒有成功。不知道我做錯了什麼！這是我的jsfiddle。謝謝。將填充（顏色）應用於SVG圖像

2014-12-03 Labanino

你需要把填充的圖像文件英寸圖像不是可以外部修改的（認爲它們具有光柵圖像的功能，並且不會有太大的錯誤）。 – 2014-12-03 18:56:27

您無法更改img標記中的SVG圖像。你應該像這樣在你的HTML內嵌SVG圖像：

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
    <path d="M0 0h24v24h-24z" fill="none"/> 
    <path class="check" d="M12 1l-9 4v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12v-6l-9-4zm-2 16l-4-4 1.41-1.41 2.59 2.58 6.59-6.59 1.41 1.42-8 8z"/> 
</svg>

來源

2014-12-03 18:58:03 user1620220

那麼，我在Illustrator中用'SVG代碼'得到''然後呢？或者有其他方法？ – Labanino 2014-12-03 21:37:42

不確定你在問什麼。您可以使用Illustrator，Inkscape或幾乎任何文本編輯器來打開SVG圖像以查看標記。 – user1620220 2014-12-03 21:48:14

酷男！謝謝。 – Labanino 2014-12-03 22:35:19

你不能改變svg文件的顏色。你需要有實際的svg標籤和路徑，而不是img標籤。

http://jsfiddle.net/hhoa8v9e/1/

<svg width="4cm" height="4cm" viewBox="0 0 400 400" 
    xmlns="http://www.w3.org/2000/svg" version="1.1" id="triangle"> 
    <path d="M 100 100 L 300 100 L 200 300 z" 
     stroke="blue" stroke-width="3" /> 
</svg> 


#triangle { 
    fill:blue; 
}

來源

2014-12-03 18:58:13 cport1

將填充（顏色）應用於SVG圖像

回答

相關問題