svg - SVG 根元素的默认背景颜色

标签 svg

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

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

上面的解决方案有效,但不幸的是样式属性的背景属性不是标准的:http://www.w3.org/TR/SVG/styling.html#SVGStylingProperties ,因此它会在使用 SVG Cleaner 的清理过程中被删除。

还有其他方法来声明此背景颜色吗?

最佳答案

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

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

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

关于svg - SVG 根元素的默认背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11293026/

相关文章:

css - SVG 颜色过渡不适用于悬停

javascript - d3折线图,未画线

javascript - D3.js 剪辑路径切断了我的图表的边缘

javascript - IE11 jQuery html() 在 SVG 元素内不起作用

css - SVG 路径 - 直接从代码中排除重叠形状

javascript - 悬停时删除 clipPath

svg - 字母 'e' 在 SVG 路径中意味着什么?

javascript - 我可以为构成 D3 轴的文本和线条元素赋予唯一的类吗?

css - 从 Sketch App 导出带有渐变的 SVG 时出现问题

html - 在独立的 HTML 文件中嵌入 SVG 字体字形