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

1 个答案: