如何设置顶级svg元素的位置？

比方说，我们有一个非常简单的设置像下面如何设置顶级svg元素的位置？

<html> 
    <head></head> 

    <body> 
     <script type="text/javascript"> 
      var svg = d3.select("body").append("svg"); 
      svg.attr("width", "100").attr("height", "100").style("border", "1px solid black"); 
     </script> 
    </body> 
</html>

什么决定了顶部SVG元素的位置？如何改变它？

当你看到了attributes of an svg element你会发现，它已得到x和y属性，但在这两种情况下，它说，

对最SVG元素没有意义或影响

它是有道理的，因为x和y只会相对于父svg元素进行定义。那么如何设置顶部的位置呢？

谢谢！

来源

2016-08-14 tsotsi

你的问题还不清楚。显示一些代码！ –

要更改'SVG'容器本身的位置，可以使用CSS或内联'样式'规则。例如：'svg {position：relative; top：100px; left：100px; }' – Aziz

太棒了，谢谢 – tsotsi

您可以像放置其他DOM元素一样定位最外层的元素。

var svg = d3.select("body").append("svg"); 
 
svg.attr("width", "100").attr("height", "100").style("border", "1px solid black");

svg { 
 
    position: relative; 
 
    top: 100px; 
 
    left: 50px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

来源

2016-08-14 16:21:15

如何设置顶级svg元素的位置？

回答

相关问题