对齐顶部多边形对象

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>代码中。它告诉渲染器将内容放在视口的顶部中心。