在其他<svg>元素内部的<svg>元素会忽略"Background"样式属性。

Question

一个带有两个嵌套的<svg>元素的简单实验显示：

• 外部的<svg>元素应用了background样式属性。
• 内部的<svg>元素没有应用background样式属性。

另一个实验在两个<svg>中都添加了一个transform属性，显示内部的<svg>也会忽略这个属性。

为什么内部的<svg>元素会忽略像background样式和transform这样的属性？一般来说，是否有文档说明哪些属性适用于嵌套的<svg>元素？

- Walmink

Answer 1

问题在于，当一个<svg>被嵌入到HTML中时，它实际上会同时扮演SVG元素和HTML元素两个角色。

出于一致性考虑，某些HTML特性适用于最外层的<svg>元素，但不适用于内部/嵌套的SVG元素。请记住，SVG是一个与HTML不同的标准，它有不同的用途，并不是所有HTML特性都适用于SVG元素。尽管如此，在合理的范围内，某些HTML特性得到了支持，或者很快将得到支持。

其中一个早期的添加是使background/background-color与最外层的<svg>元素配合使用。据我所知，现在所有浏览器都支持这个功能。 transform也是同样的情况。当前的SVG规范（1.1）不允许在<svg>元素上使用transform，但为了与其他HTML元素保持一致，浏览器支持在最外层的<svg>元素上使用它。在即将推出的SVG 2标准中，transform也将允许在内部的<svg>元素上使用。实际上，Firefox已经实现了这个功能。我相信它目前是唯一支持这一功能的浏览器。

如果您想要一个在所有浏览器中都有效的方法，通常可以采用以下方法。

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

- Paul LeBeau

Answer 2

我发现另一个问题与此相同，并且另一个重复项包含了这个链接到官方W3C文档，显示哪些属性允许在嵌套的<svg>组件上使用。

总之，嵌套的<svg>不能做所有顶级<svg>可以做的事情，如果你遇到问题，请查看W3C文档，以确定你尝试做的事情是否被支持。

- Walmink