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。