更改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: rebeccapurple;
}

请注意，这将应用于文档中的所有 svg元素，为避免这种情况，您应该使用类或ID。

或者，您可以将其直接添加到您的元素中，如果由于某些原因您无法修改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>

Answer 2

为什么不使用CSS更改主体或SVG /图像的背景颜色？

svg {
  background-color: red;
}

要么

body {
background-color: red;
}

Answer 3

使用mask属性，可以创建应用于元素的遮罩。 遮罩不透明或实心的任何地方，下面的图像都会显示出来。 在透明的地方，基础图像被掩盖或隐藏。

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