166

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

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

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

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

4

7 回答 7

153

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

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

<rect width="100%" height="100%" fill="red"/>
于 2012-07-02T12:35:50.997 回答
54

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

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

于 2013-12-03T17:11:50.750 回答
47

是@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>

这个答案使用：

于 2017-11-14T21:18:19.010 回答
25

让我报告一个我发现的非常简单的解决方案，它没有写在以前的答案中。我还想在 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>
于 2018-05-05T16:58:17.933 回答
11

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

<?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 建议中可绘制元素的一部分。

所以我建议使用Robert Longson 提供的“rect”解决方案，因为我猜这不是一个简单的“hack”。这似乎是使用 SVG 设置背景的标准方法。

于 2014-03-23T10:04:20.553 回答
3

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

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

<style type="text/css">
.background{
  background-color: black; 
  /*background-image: */
}
</style>
于 2013-10-26T03:31:33.160 回答
0

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>

于 2021-11-09T13:34:17.067 回答