嵌套的svg没有扩展以填充父容器

时间:2018-04-24 06:09:46

标签: html css svg

根据此articlethis article,如果您没有指定内部SVG的宽度和高度,它应该自动扩展外部SVG的宽度和高度。

此HTML:

<html>
<head></head>
<body>

<svg width="100%" height="100%">
  <svg>
<path d="M470.3,204.3 l-1,-2.3 -0.5,-1.6 -2.9,-1.6 -4.8,-1.5 -2.2,-1.2 
-2.6,0.1 -3.7,0.4 -4.2,1.2 -6,-4.1 -2.2,-2 -10.7,0.6 -41.5,-2.4 
-35.6,-2.2 -4.3,43.7 33.1,3.3 -1.4,21.1 21.7,1 40.6,1.2 43.8,0.6 h4.5 
l-2.2,-3 -2.6,-3.9 0.1,-2.3 -1.4,-2.7 -1.9,-5.2 -0.4,-6.7 -1.4,-4.1 
-0.5,-5 -2.3,-3.7 -1,-4.7 -2.8,-7.9 -1,-5.3z" id="a state" 
fill="#000000" />
  </svg>
</svg>
</body>
</html>

结果

enter image description here

注意:我使用的是最新的Chrome浏览器。

正如您所看到的,内部SVG没有扩展以填充外部SVG,如上文所述,即使内部SVG上未指定高度和宽度。我曾尝试弄乱preserveAspectRatio atrribute而无济于事(根据我的理解,它应该无关紧要)。

我错过了什么?

感谢您的帮助,如果我遗失任何内容或需要提供更多信息,请告知我们。

0 个答案:

没有答案