SVG 根元素的默认背景色 [英] Default background color of SVG root element

问题描述

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

I'd like to set a default background color for the entire SVG document, to red for example.

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

上述解决方案有效，但遗憾的是 style 属性的背景属性不是标准属性:http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties，因此它会在使用 SVG Cleaner 的清理过程中被移除.

The solution above works but the background property of the style attribute is unfortunately not a standard one : http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties, and so it gets removed during the cleaning process with SVG Cleaner.

还有其他方法可以声明这种背景颜色吗?

Is there another way to declare this background color?

推荐答案

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

SVG 1.2 Tiny has viewport-fill I'm not sure how widely implemented this property is though as most browsers are targetting SVG 1.1 at this time. Opera implements it FWIW.

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

A more cross-browser solution currently would be to stick a <rect> element with width and height of 100% and fill="red" as the first child of the <svg> element, for example:

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

这篇关于SVG 根元素的默认背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！