SVG 根元素的默认背景颜色

SVG 1.2 Tiny 有 viewport-fill 虽然目前大多数浏览器都以 SVG 1.1 为目标，但我不确定该属性的实现范围有多广。 Opera 实现了 FWIW。

目前更跨浏览器的解决方案是粘贴一个宽度和高度为 100% 的 <rect> 元素，并将 fill="red" 作为 <svg> 元素的第一个子元素，例如：

<rect width="100%" height="100%" fill="red"/>

---

发现这在 Safari 中有效。 SVG 仅在元素的边界框覆盖的背景颜色中着色。因此，给它一个具有零像素边界的边界（笔划）。它用您的背景颜色为您填充整个内容。

<svg style='stroke-width: 0px; background-color: blue;'> </svg>

---

是@Robert Longson 的回答，现在有代码了（本来没有代码，后来加的）：

这个答案使用：

https://stackoverflow.com/a/11293812/6747994

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

---

让我报告一个我发现的非常简单的解决方案，它没有写在以前的答案中。我还想在 SVG 中设置背景，但我也希望这可以在独立的 SVG 文件中使用。

嗯，这个解决方案真的很简单，事实上 SVG 支持样式标签，所以你可以做类似的事情

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
  <style>svg { background-color: red; }</style>
  <text>hello</text>
</svg>

---

我目前正在处理这样的文件：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="style.css" ?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="100%"
  height="100%"
  viewBox="0 0 600 600">
...

我试图把它放到 style.css 中：

svg {
  background: #bf1f1f;
}

它适用于 Chromium 和 Firefox，但我认为这不是一个好习惯。 EyeOfGnome 图像查看器不会渲染它，Inkscape 使用一个特殊的命名空间来存储这样的背景：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
    version="1.1"
    ...
  <sodipodi:namedview
     pagecolor="#480000" ... >

好吧，SVG 根元素似乎不是 SVG 建议中 paintable elements 的一部分。

所以我建议使用 "rect" solution provided by Robert Longson 因为我猜它不是一个简单的“hack”。这似乎是使用 SVG 设置背景的标准方式。

---

另一种解决方法可能是使用相同大小的 <div> 来包装 <svg>。之后，您将能够应用 "background-color"，而 "background-image" 将影响 svg。

<div class="background">
  <svg></svg>
</div>

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>

---

background 和 background-color 未得到广泛支持

没有的最短代码是绘制一个半径为 10000 的圆，这也适用于与 viewBox 不同的宽度-高度-纵横比。

<circle r="1e5" fill="red"/>

---