嵌套SVG的盒子模型出乎意料地基于其子内容的大小

Question

对于顶级SVG，边界框由其width/height或viewBox属性确定。但是，不幸的是，我发现嵌套在其他SVG中的SVG似乎意外地将边界框建立在其子内容的大小上。

有人知道如何强制浏览器基于自身的width/height/viewBox属性或其他方式来计算嵌套的SVG边界框吗？

下面是该问题的演示。

谢谢。

https://jsfiddle.net/twhqbc87/1/

Answer 1

如果不清楚，Robert的意思是您必须使用属性来设置SVG大小。即。

<svg xmlns="http://www.w3.org/2000/svg" width="35px" height="35px">

style属性方法仅在<svg>是HTML中的元素时才有效。就是它是HTML树的一部分。当它是SVG的子级时，它将成为SVG文档的一部分，并且根据SVG规则进行处理和运行。而且在SVG规则下，您不能使用CSS设置<svg> width和height属性的样式。