1

测试一个带有一些文本的简单页面和一个带有高度和重量百分比值的 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>

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

谢谢你。

4

1 回答 1

1

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

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

于 2013-08-11T05:59:53.563 回答