时间戳

首页 > 解决方案 > 在 html 标签中显示小 svg 图片

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

问题描述

我想要<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 图片时是否存在错误？

标签： htmlsvg

解决方案

您需要添加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>

推荐阅读