为什么这个SVG不适合小DIV尺寸的父DIV？

Question

我的期望是三角形应该在容器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/

Answer 1

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

最简单的修复，如果您准确定位SVG，则设置display: block。

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