在html标签中显示小型svg图片

Question

我想要一张<div>标记内三角形的SVG图片。我希望它出现在<div>标签的顶部。我试过这个：

<div style='width:20px;height:10px;background-color:blue'>
<svg width="20px" 
height="10px" 
version="1.1" 
viewBox='0 0 20 10' 
xmlns="http://www.w3.org/2000/svg">
<polygon points="0 10, 20 10, 10 0" 
fill="black" 
stroke-width="0"/>
</svg>
</div>

但三角形显示得比它应该显示的要低。奇怪的是，如果我在上面的代码中每个坐标/大小乘以3，那么一切都显示正确。我在Chrome/Firefox/Edge的codepen中尝试过，它在任何地方都是相同的行为。

我的问题是：我是在某个地方滥用了什么，还是在显示小的SVG图片时出现了错误？

Answer 1

您需要将display:flex添加到您的div:

<div style='width:20px;height:10px;background-color:blue;display:flex;'>
<svg width="20px" 
height="10px" 
version="1.1" 
viewBox='0 0 20 10' 
xmlns="http://www.w3.org/2000/svg">
<polygon points="0 10, 20 10, 10 0" 
fill="black" 
stroke-width="0"/>
</svg>
</div>