如何設置頂級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元素的位置？

回答

相關問題