SVG 使用 CSS 更改填充颜色答案

【问题标题】：SVG Change Fill Color with CSSSVG 使用 CSS 更改填充颜色
【发布时间】：2018-11-22 10:31:39
【问题描述】：

我有一些与这张图片相似的 SVG 图片（透明背景的白色图片）（参见 Rain SVG）

是否有任何 CSS 可用于将主填充更改为任何颜色而不填充整个图像？ HTML：

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

CSS：

.rainIcon 
fill: #ffa07f;
}

【问题讨论】：

你能显示html输出吗？
最好将 svg 附加到您的问题中。

标签： html css svg

【解决方案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>

【讨论】：

如何使用图像而不是圆形来执行此操作？

【解决方案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>-->

【讨论】：