SVG 根元素的默认背景色

我想为整个 SVG 文档设置一个默认的背景颜色，例如红色。

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

上面的解决方案是可行的，但是 style 属性的后台属性不是标准属性: http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties，因此在使用 SVG Cleaner 清理过程中会删除它。

还有其他方法声明这种背景颜色吗？

252947 次浏览
小开
最佳答案

SVG 1.2 Tiny 有 Viewport-fill我不确定这个属性的实现有多广泛，因为大多数浏览器目前都以 SVG 1.1为目标。Opera 实现了它 FWIW。

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

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

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

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


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

在 Safari 上找到了这个。SVG 只在元素的边界框覆盖的地方使用背景色。因此，给它一个零像素边界的边框(笔画)。它用你的背景颜色填充整个东西。

<svg style='stroke-width: 0px; background-color: blue;'> </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 根元素似乎不是 可绘制的元素的一部分。

所以我建议使用 罗伯特 · 朗森提供的“正确”解决方案，因为我想它不是一个简单的“黑客”。似乎是 标准方式用 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 中设置背景，但是我也想在一个独立的 SVG 文件中工作。

这个解决方案非常简单，实际上 SVG 支持样式标记，所以您可以这样做

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


提交答案