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

Ниже я вижу альтернативу изображению в качестве фона.но есть еще один фильтр, но вы должны действительно проверить с поддержкой браузера.ссылка: 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>-->

Answer 2

надеюсь, что это поможет вам: чтобы иметь возможность изменить цвет заливки, 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>