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);

更改SVG中图像的背景颜色

3 个答案: