SVG根元素的默认背景色

我想将整个SVG文档的默认背景色设置为红色。

<svg viewBox="0 0 500 600" style="background: red">/* content */</svg>

上面的解决方案有效，但是不幸的是，style属性的bac​​kground属性不是标准的：http : //www.w3.org/TR/SVG/styling.html#SVGStylingProperties，因此在使用SVG进行清理过程中将其删除。清洁器。

还有另一种方法来声明此背景色吗？

SVG 1.2 Tiny具有视口填充功能，虽然目前大多数浏览器都将SVG 1.1作为目标，但我不确定该属性的实现范围如何。Opera实施FWIW。

当前，跨浏览器的另一种解决方案是将<rect>宽度和高度为100％的元素粘贴并以fill =“ red”作为该<svg>元素的第一个子元素，例如：

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

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

<svg style='stroke-width: 0px; background-color: blue;'> </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>

该答案使用：

• https://stackoverflow.com/a/11293812/6747994
• https://developer.mozilla.org/zh-CN/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;
}

它工作在铬和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命令中可绘画元素的一部分。

因此，我建议使用Robert Longson提供的“ rect”解决方案，因为我认为这不是一个简单的“ 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>