作为背景的SVG图像在Firefox和Chrome上显示完全不同

Question

我有这个SVG：

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
 <polygon points="8,0 8,7 14,12 14,94 92,94 97,91 97,15 99,13 99,0" id="p2" style="fill:none; stroke-width: 1px;" stroke="#555555"/>
</svg>

我用作这样的div的背景：

background:url("images/global/lineas.svg") no-repeat 0 0 / 100% 100%;
width:280px;
height:130;

在Firefox上，图像在宽度和高度上延伸以覆盖div容器，在Chrome上结果完全不同，因为高度不适合，只有宽度。

我想要Firefox做什么。图像应该拉伸并相应地适合容器。

Answer 1

Chrome似乎保留了图片的宽高比。你可以禁用它。

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
 <polygon points="8,0 8,7 14,12 14,94 92,94 97,91 97,15 99,13 99,0" id="p2" style="fill:none; stroke-width: 1px;" stroke="#555555"/>
</svg>