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>

在HTML标记中显示小型SVG图片

1 个答案: