SVG使用CSS更改填充顏色

Question

我有一些與該圖像相似的SVG圖像（帶有透明背景的白色圖像） （請參閱Rain SVG）

是否可以使用CSS將主填充更改為任何顏色而不填充整個圖像？ HTML：

<button class={style.sbutton} onClick={this.props.onClick}>
    <Icon class={style.rainIcon} src={Rain} />
</button>

CSS：

.rainIcon 
fill: #ffa07f;
}

Answer 1

希望這對您有所幫助：為了能夠更改填充顏色，必須在頁面中添加svg。 如果將其作為背景圖像放置，則不可能。

<style>
    a.icon{fill: blue;}
</style>

    <a href="#" class="icon">
        <svg viewBox="0 0 100 100">
            <use xlink:href="#circle" />
        </svg>
    </a>

    <div style="display:none">
    <svg viewBox="0 0 100 100">
      <symbol id="circle" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="50"/>
        </symbol>
    </svg>
    </div>

Answer 2

我以圖像為背景，看到下面是上面的替代。 但是還有另一個過濾器，但您應該真正使用瀏覽器支持進行檢查。 參考： MDN

    <style>
        /*a.icon{fill: blue;}*/
        a.imageIcon{
            display:inline-block;
            width:24px;
            height:24px;
            background-image:url('assets/imageIcon-blue.svg');
            background-repeat:no-repeat;
            }
        a.imageIcon:hover{
            background-image:url('assets/imageIcon-green.svg');
            }

    </style>

<!--    <a href="#" class="icon"> <svg viewBox="0 0 100 100"> <use xlink:href="#circle" /></svg></a>    -->

    <a href="#" class="imageIcon"> </a>

   <!-- <div style="display:none">
        <svg viewBox="0 0 100 100">
            <symbol id="circle" viewBox="0 0 100 100">
                <circle cx="50" cy="50" r="50"/>
            </symbol>
        </svg>
    </div>-->