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