对于较小的DIV尺寸，为什么此SVG不适合其父DIV? [英] Why doesn't this SVG fit inside its parent DIV for small DIV sizes?

问题描述

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

My expectation is that the triangle should be inside the container div. This works as expected for widths bigger than 14 pixels or so, but for small div sizes the SVG gets bumped down.

<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/

推荐答案

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

An <svg> element in HTML is set to display: inline by default. This can cause it to be affected by line-wrapping when space is constrained; the icon will wrap to the next line in the same way as a word in a paragraph.

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

Easiest fix, if you are positioning the SVG precisely, is therefore to set display: block.

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

这篇关于对于较小的DIV尺寸，为什么此SVG不适合其父DIV?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！