對齊頂部多邊形對象

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>標記。它告訴渲染器將內容定位在視口的頂部中心。