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纵横比计算合适的高度。不幸的是，它不是。它正在治疗高度＆＃34; 100％＆＃34;表示＆＃34;页面的高度＆＃34;。你无能为力。

您必须使用Javascript自行计算和设置SVG的大小，或者将其设置为固定大小并使用它。

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

1 个答案: