我想为整个 SVG 文档设置一个默认的背景颜色，例如红色。
<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>
上述解决方案有效，但不幸的是样式属性的背景属性不是标准属性：http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties，因此在使用 SVG Cleaner 进行清理过程中将其删除。
还有其他方式来声明这种背景颜色吗？
【问题讨论】：
标签： svg
background 和 background-color 未得到广泛支持
没有的最短代码是绘制一个半径为 10000 的圆，这也适用于不同于 viewBox 的宽高纵横比。
<circle r="1e5" fill="red"/>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle r="1e5" fill="red"/>
</svg>【讨论】：
是@Robert Longson 的回答，现在有代码了（本来没有代码，后来加的）：
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="red"/>
</svg>这个答案使用：
【讨论】：
SVG 1.2 Tiny 有viewport-fill 虽然目前大多数浏览器都针对 SVG 1.1，但我不确定这个属性的实现范围有多广。 Opera 实现了 FWIW。
目前更跨浏览器的解决方案是粘贴一个宽度和高度为 100% 的 <rect> 元素，并将 fill="red" 作为 <svg> 元素的第一个子元素，例如：
<rect width="100%" height="100%" fill="red"/>
【讨论】：
width="10000%" height="10000%" 可能会修复它。如果没有，则添加一些零
viewport-fill caniuse 拉取请求：github.com/Fyrd/caniuse/issues/2186 为什么他们为什么让 SVG 死掉。
让我报告一个我发现的非常简单的解决方案，它没有写在以前的答案中。我还想在 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>
【讨论】：
<svg> 元素的background-color 将使IE11 渲染背景颜色也在viewBox 属性定义的区域之外。不过，在使用 width 和 height 属性时，这并不重要。
<style>标签在顶层，<svg style"...."></svg>和<svg><style>...</style></svg>有区别吗？如果不是，那么这个答案似乎就像 OP 的原始解决方案，以不同的语法重新打包。 （但也许这个解决方案在 SVG Cleaner 中存在，而 <svg style="..."></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，因为我猜这不是一个简单的“黑客”。这似乎是使用 SVG 设置背景的标准方式。
【讨论】：
发现这在 Safari 中有效。 SVG 仅在元素的边界框覆盖的背景颜色中着色。因此，给它一个具有零像素边界的边界（笔划）。它用你的背景颜色为你填充了整个东西。
<svg style='stroke-width: 0px; background-color: blue;'> </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>
【讨论】：