svg - 对齐顶部多边形对象

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>标签。它告诉渲染器将内容定位在视口的顶部中心。