将填充（颜色）应用于SVG图像

Question

我一直试图使用fill将不同的颜色应用到svg但没有成功。不知道我做错了什么！这是我的 jsfiddle 。感谢。

Answer 1

您无法更改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>

Answer 2

您无法更改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;
}