Question

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

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

Another experiment为transform两个<svg>添加<svg>属性，表明内部<svg>也忽略了此属性。

内部background元素忽略transform样式和<svg>等属性的原因是什么？通常，是否存在哪些属性适用于嵌套model.add(MaxPooling2D((2,2)))元素的文档？

Answer 1

问题在于，当HTML中嵌入了<svg>时，它既可以作为SVG元素又可以作为HTML 进行双重任务。

为了保持一致性，某些HTML功能适用于最外层<svg>元素，但它们不适用于内部/嵌套SVG元素。请记住，SVG是HTML的不同标准。它有不同的目的，使用SVG元素的所有HTML功能都没有意义。话虽如此，在有意义的地方，支持或将很快支持某些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>

Answer 2

我发现another question存在同样的问题，another duplicate包含指向official W3C documentation的链接，显示了嵌套<svg>组件允许的属性。

总之，嵌套的<svg>无法完成顶级<svg>的所有操作，如果遇到问题，请检查W3C documentation以查看您是否正在尝试执行此操作根本不受支持。

Answer 3

您应该将fill css属性用于内部svg＆＃39; s。 Demo

<svg fill="blue" />

其他<svg>元素

3 个答案: