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>-->

SVG使用CSS更改填充颜色

2 个答案: