Изменить цвет фона изображения в SVG

Question

Как изменить цвет фона тега в SVG.У меня есть прозрачное изображение, загруженное в тег изображения, теперь я хочу применить фон, чтобы применить оттенок с помощью палитры цветов.

<svg width="200" height="200"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">       
  <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>

Фон svg меняется, но не служит моей цели.я хочу применить цвет непосредственно к тегу изображения

Answer 1

Почему бы не использовать css для изменения цвета фона тела или изображения / изображения?

svg {
  background-color: red;
}

или

body {
background-color: red;
}

Answer 2

С помощью свойства mask вы создаете маску, которая применяется к элементу. Везде, где маска непрозрачна или сплошна, нижележащее изображение просвечивает. Там, где оно прозрачно, основное изображение скрыто или скрыто.

    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);

Answer 3

В вашем CSS-файле вы можете просто добавить

svg {
    background-color: rebeccapurple;
}

Обратите внимание, это будет применяться к всем элементам svg в вашем документе, во избежание этого вы должны использовать классили идентификатор.

Кроме того, вы можете добавить его непосредственно в свой элемент, если по какой-то причине вы не можете изменить свой CSS-файл:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color: rebeccapurple">       
    <image xlink:href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/>
</svg>