SVG.在DOM中定位SVG标记的正确方法是什么

Question

因此，设置svg元素的宽度很容易（此处使用d3）：

svg = d3.select("body").append("svg")
    .attr("width",  300)
    .attr("height",  1024);

然而，我需要将div和svg元素放在一起，所以我需要为svg元素设置一个x，y的位置。这不起作用：

svg = d3.select("body").append("svg")
.attr("x", 128)
.attr("y", 256)
.attr("width",  300)
.attr("height",  1024);

设置一个使用绝对定位的css类属性确实有效，但这有点麻烦。这里的正确解决方案是什么？

正如我在下面的评论中提到的，我想布局N列svg/div对，如下所示：

<svg>d3 coolness 0></svg><div>not so cool 0</div>
<svg>d3 coolness 1></svg><div>not so cool 1</div>
<svg>d3 coolness 2></svg><div>not so cool 2</div>

全部在一行中。

我甚至尝试将定位插入svg元素中，如下所示：

$('svg').css({
    "left": 200 + "px",
    "top": 300 + "px"
});

没有效果。嗯？

Answer 1

我已经软化了态度，将按照评论者的建议继续使用css。