如何通过css改变单色.svg文件的颜色？

Question

我使用SVG图标像下面，我不希望使用图标字体（我已经知道是容易改变颜色）

<img src="/images/ic_play_arrow_black_24px.svg"> 

默认情况下，这个图标是黑色，我想把它改成绿色。

以较少的努力做到最好的方法是什么？

网址箭头文件https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_play_arrow_black_24px.svg

Answer 1

可以在页面定义SVG （虽然有JS solutions用于关闭页面的定义）作为symbol或defs然后用an..ahem，用use元素上课......但这可能比你想要的更多的工作。

svg { 
 
    display; 
 
    inline-block; 
 
    width: 24px; 
 
} 
 
.hidden { 
 
    display: none; 
 
} 
 
.red { 
 
    fill: red; 
 
} 
 
.green { 
 
    fill: green; 
 
}

<svg class="hidden" fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <g id="arrow"> 
 
     <path d="M8 5v14l11-7z" /> 
 
     <path d="M0 0h24v24H0z" fill="none" /> 
 
    </g> 
 
    </defs> 
 
</svg> 
 

 
<svg> 
 
    <use xlink:href="#arrow" class="red" /> 
 
</svg> 
 

 
<svg> 
 
    <use xlink:href="#arrow" class="green" /> 
 
</svg>