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