Question

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

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

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

是否有其他方式来声明这种背景颜色？

Answer 1

SVG 1.2 Tiny有viewport-fill我不确定这个属性有多广泛实现，因为大多数浏览器目前都在针对SVG 1.1。 Opera实现了FWIW。

目前更多的跨浏览器解决方案是粘贴宽度和高度为100％的<rect>元素，并填充=“red”作为<svg>元素的第一个子元素，例如：

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

Answer 2

发现这适用于Safari。 SVG仅使用背景颜色进行颜色，其中元素的边界框覆盖。因此，给它一个零像素边界的边框（笔画）。它用你的背景颜色填充整个东西。

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

Answer 3

这是@Robert Longson的答案，现在代码为：

＆＃13;

<?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>

＆＃13;

这个答案使用：

Answer 4

让我举报一个我发现的非常简单的解决方案，这不是以前的答案。我也想在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>

Answer 5

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

<?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设置背景似乎是标准方式。

Answer 6

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

svg

SVG根元素的默认背景颜色

6 个答案: