css - "Background"忽略其他 元素内的 元素的样式属性

Question

simple experiment with two nested <svg> elements显示:

外<svg>元素具有 background已应用样式属性

内部<svg>元素没有 background已应用样式属性

Another experiment添加 transform两者的属性 <svg> s 显示该属性也被内部 <svg> 忽略.

内在的任何原因 <svg>元素忽略像 background 这样的属性造型和 transform ?一般来说，是否有文档说明哪些属性适用于和不适用于嵌套 <svg>元素？

Answer 1

问题是，当 <svg>嵌入在 HTML 中，它作为 SVG 元素和 HTML 元素都具有双重作用。

为了保持一致性，一些 HTML 特性与最外层的 <svg> 一起使用。元素，但它们不适用于内部/嵌套的 SVG 元素。请记住，SVG 是与 HTML 不同的标准。它有一个不同的目的，并且所有 HTML 功能都与 SVG 元素一起使用没有任何意义。话虽如此，在有意义的情况下，某些 HTML 功能得到支持，或者很快就会得到支持。

一个早期的添加是制作 background/background-color与最外层一起工作 <svg>元素。 AFAIK 现在所有浏览器都支持。

这同样适用于 transform .当前的 SVG 规范 (1.1) 不允许 transform在 <svg>元素，但为了与其他 HTML 元素保持一致，浏览器支持最外层 <svg>元素。在即将发布的 SVG 2 标准中，transform将允许在内部 <svg>元素也是如此。事实上，Firefox 已经实现了这一点。我相信它是目前唯一的浏览器。

如果您想要一种适用于任何地方的方法，以下通常可以解决问题。

<svg ...>
  <rect width="100%" height="100%" fill="#00f"/>
  ...
</svg>