更改從文件加載的SVG的顏色

Question

我從文件中加載了SVG，就像這樣的標記...

<img class="svgbutton" src="filepath/icon.svg">

svg只是單色的簡單圖標。 是否可以使用CSS或javascript來控制svg的顏色（可能是濾鏡？）？

還是這樣做的唯一正確方法是在腳本中完全繪制它？

Answer 1

我建議在HTML中像這樣使用內聯SVG：

<div style="color: red;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        [ ... ]
    </svg>
</div>

這樣，您可以使用標准CSS（如果需要進行動態更改，則可以使用JavaScript，但是請記住，存在一些偽類來設置鼠標懸停樣式等）。 這里的技巧是將繼承的CSS color應用於具有fill: currentColor;的SVG填充顏色fill: currentColor;

<style type="text/css">
    svg {
        fill: currentColor;
    }
</style>

您還可以將多個符號放在一起，用CSS display: none;隱藏整個“集合” display: none; 在<svg ...>元素上，並分別在多個位置重復使用這些符號。

“集合”中的符號定義：

<g id="icon1">
    <path class="path1" d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path>
</g>

像這樣在任何地方使用它：

<svg viewBox="0 0 64 64">
    <use xlink:href="#icon1"></use>
</svg>

注意：從SVG 2.0開始不推薦使用xlink:href ，並且將其替換為href ，盡管您的瀏覽器可能不支持...

您還可以在一個符號中為多個路徑設置不同的顏色：

<style type="text/css">
    .path1 {
        color: blue;
        fill: currentColor;
    }
</style>

在選擇JavaScript來動態更改元素的類之前，請繼續嘗試使用類和偽類，因為可能沒有必要。

Answer 2

這可能需要一些Javascript或Jquery，通常有些棘手。

我可以想到的最簡單的方法可能是以下CSS 代碼：

.element {
    -webkit-mask: url(yourimage.svg) center / contain no-repeat;
    background: red;
}

但是，有些瀏覽器不支持此功能，盡管有備用。