如何定位SVG画布

2015-02-07 124 views -1 likes

-1

我无法弄清楚如何在页面上放置SVG元素。我花了一个小时阅读Sara Soueidan教程，将SVG元素的内部内容定位在SVG的视口内，但我无法找到任何位置将视图定位在页面上的位置。我试着我的包裹一个div内SVG和浮动股利（无济于事）：如何定位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>

这似乎是这样一个简单的概念，但我不能在任何地方找到答案。

来源

2015-02-07 Mouse6541

回答

您可以将<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的屏幕尺寸，使定位更加明显）。

来源

2015-02-07 05:02:38

如何定位SVG画布

回答

相关问题