如何通過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>