使用宽度为100、高度为100的svg，我在Safarie chrome中获得了额外的空间

测试一个包含一些文本的简单页面和一个高度和重量百分比值的svg，我在svg前后获得了额外的空间。Firefox中没有额外的空间，但您可以在Safari和Chrome中找到它。您可以在此处看到：

这是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>

科伦比尼蝗虫
科伦比尼蝗虫

一些建议，以了解为什么会创建额外的空间

---

谢谢。

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

---

您可以自己使用Javascript计算并设置SVG的大小，也可以将其设置为固定大小并使用它。

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

---

您可以自己使用Javascript计算并设置SVG的大小，也可以将其设置为固定大小并使用它。

谢谢您的回答。实际上，我正在测试ePub的代码。我看到仅使用width=“100%”Adobe Digital Edition工作正常，但Ibooks（如您所说使用webkit）正在将svg置于白色页面中。我希望能找到解决办法，但实际上正如你所说，我无能为力。我不能使用Javascript，因为在ePub2中这是不允许的……更新：似乎在一个带有width=“100%”的对象标记中使用svg解决了这个问题。不幸的是，在ePub中没有：（谢谢你的回答。实际上我正在测试ePub的代码。我发现只使用width=“100%”Adobe Digital Edition可以正常工作，但是Ibooks（正如你所说，它使用webkit）正在将svg放置在白色页面中。我希望找到解决方案，但实际上正如您所说，我无能为力。我不能使用Javascript，因为在ePub2中这是不允许的……更新：似乎在具有width=“100%”的对象标记中使用svg解决了问题。不幸的是，在ePub中没有：(