Question

我们说我们有一个非常简单的设置，如下所示

<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元素定义。如何设置顶部的位置？

谢谢！

Answer 1

您可以像处理任何其他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>

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

1 个答案: