SVG根元素的默认背景颜色

Question

我想为整个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删除它清洁器.

是否有另一种方式来声明这种背景颜色？

Answer 1

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

目前更多的跨浏览器解决方案是将<rect>宽度和高度为100%的元素和fill ="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的答案,现在代码如下:

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

这个答案使用:

• /sf/answers/790566871/
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

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推荐中可绘制元素的一部分.

所以我建议使用Robert Longson提供的"rect"解决方案,因为我猜这不是一个简单的"黑客".它似乎是使用SVG设置背景的标准方法.

Answer 6

background并且background-color没有得到广泛的支持

最短的代码是画一个半径为 10000 的圆，这也适用于与 viewBox 不同的宽度-高度-纵横比。

<circle r="1e5" fill="red"/>

<circle r="1e5" fill="red"/>