如何定位 SVG canvas

Question

我一辈子都想不出如何在页面上定位 SVG 元素。我花了一个小时阅读 Sara Soueidan 关于在 SVG 视口内定位 SVG 元素的内部内容的教程，但我找不到任何地方如何在页面上定位视口。我尝试将我的 SVG 包装在 div 中并浮动 div （无济于事）：

<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>

（我缩小了 SVG 的屏幕尺寸，使定位更明显）。

如何定位 SVG canvas

How to position an SVG canvas

html

css

svg