使用宽=100和高=100的svg，我在safari e chrome中获得了额外的空间

Question

测试一个简单的页面，其中包含一些文本和一个高度和重量百分比值的svg，我在svg前后获得了额外的空间。Firefox中没有额外的空间，但你可以在Safari和Chrome中找到它。你可以在这里看到：http://www.venerandi.com/svg_space.xhtml

这是svg代码：

       <svg id="uno" xmlns="http://www.w3.org/2000/svg" 
        viewBox="0 0 500 250"
        width="100%"
        height="100%"
        preserveAspectRatio="xMidYMid meet">
        <polygon points="1, 20 500, 1 220, 250"
            style="fill:#FFFFFF;
            stroke:#000000;stroke-width:5"/>
        <text x="47" y="42" font-size="24" fill="red" font-weight="bold">Colombini Locusta</text>
        <text x="45" y="44" font-size="24" color="black" font-weight="bold">Colombini Locusta</text>
        <rect x="200" y="100" width="70" height="70" style="fill:red"/> 
    </svg>

一些建议来理解为什么要创建额外的空间？

谢谢。

Answer 1

这是一个常见的问题。不幸的是，您在基于Webkit的浏览器中遇到了一个错误。它应该根据宽度和viewBox纵横比来计算适当的高度。不幸的是，事实并非如此。它将"100%"的高度视为"页面的高度"。你对此无能为力。

您要么必须使用Javascript自己显式地计算和设置SVG的大小，要么将其设置为固定大小并使用它。