如何定位SVG畫布

Question

我無法弄清楚如何在頁面上放置SVG元素。我花了一個小時閱讀Sara Soueidan教程，將SVG元素的內部內容定位在SVG的視口內，但我無法找到任何位置將視圖定位在頁面上的位置。我試着我的包裹一個div內SVG和浮動股利（無濟於事）：

<div id="svg-left"> 
    <svg id="angle-left" class="angle" xmlns="http://www.w3.org/2000/svg" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
    </svg> 
</div> 

這似乎是這樣一個簡單的概念，但我不能在任何地方找到答案。

Answer 1

您可以將<svg>元素放置爲與任何其他HTML元素相同。你可以把它們飄浮，使用絕對定位等

這裏有一個演示：

#angle-left 
 
{ 
 
    float: right; 
 
} 
 

 
#angle-left2 
 
{ 
 
    position: absolute; 
 
    left: 200px; 
 
    bottom: 100px; 
 
}

<svg id="angle-left" class="angle" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 512 512"> 
 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
 
</svg> 
 

 
<svg id="angle-left2" class="angle" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" viewBox="0 0 512 512"> 
 
    <polygon points="352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256 "/> 
 
</svg>

（我降低了對SVGs的屏幕尺寸，使定位更加明顯）。