对齐顶部多边形对象

Question

我正在通过svg渲染三角形。当它处于全宽时，它会粘在div 的顶部，但如果我使窗口变小，多边形会向下移动。我试图找到一种方法将其粘在顶部，但没有成功。

这是代码。

    <div>
        <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         width="100%" height="100px" viewBox="0 0 960 100" enable-background="new 0 0 960 100" xml:space="preserve">
        <polygon fill="#22262E" points="959.746,0 480.882,96.009 2.018,0 "/>
        </svg>
    </div>

请帮助我找到解决方案。

谢谢。

Answer 1

将preserveAspectRatio="xMidYMin meet"添加到<svg>标签中。 它告诉渲染器将内容定位在视口的顶部中心。