对于小 DIV 尺寸，为什么此 SVG 不适合其父 DIV 内部？

我的期望是三角形应该位于容器 div 内。对于宽度大于 14 像素左右的情况，这可以按预期工作，但对于较小的 div 尺寸，SVG 会降低。

<div id="square" style="width: 9px; height: 9px; background-color: red">
    <svg viewBox="0 0 99 99" style="width:100%; height: 100%; fill: blue;">
        <polygon
            id="triangle"
            points="0,99 49,0 99,99" />
    </svg>
</div>

在这里小提琴：https://jsfiddle.net/rpk6c6r0/4/ https://jsfiddle.net/rpk6c6r0/4/

An <svg>HTML 中的元素设置为display: inline默认情况下。当空间有限时，这可能会导致它受到换行的影响；图标将以与段落中的单词相同的方式换行到下一行。

如果您精确定位 SVG，最简单的解决方法是设置display: block.

https://jsfiddle.net/rpk6c6r0/6/ https://jsfiddle.net/rpk6c6r0/6/