其他<svg>元素内的<svg>元素的“背景”样式属性被忽略

Question

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

• 外部<svg>元素已background应用样式属性
• 内部<svg>元素不具备的background样式属性应用

另一个实验transform向两个都添加了一个属性，<svg>表明该属性也被内部忽略<svg>。

内部<svg>元素忽略background样式和属性的任何原因transform？通常，是否有文档说明哪些属性适用于嵌套<svg>元素，以及不适用于嵌套元素？

Answer 1

问题在于，当将an <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>