いくつかのテキストと、高さと重量のパーセント値を持つ 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>
余分なスペースが作成される理由を理解するための提案はありますか?
ありがとうございました。