Javascript 将两个svg并排放置

我能够在d3.js的一个屏幕上使用2个svg。代码如下所示，并且非常有效：

<svg width="880" height="800" id="svg1"></svg>  
<svg width="880" height="800" id="svg2"></svg>

var svg1 = d3.select("#svg1");

var svg2 = d3.select("#svg2");

var svg1=d3。选择（“svg1”）；
var svg2=d3。选择（“svg2”）；

我唯一的问题是，svg2出现在svg1下。但我的目标是把它们并排放在一起。你们知道怎么解决那个问题吗？我试图用以下代码操纵svg2的x位置：

<svg cx="880" cy"100" width="880" height="800" id="svg2"></svg>

但这不是正确的解决方案。

---

谢谢大家

在HTML中，默认情况下，

svg>

元素具有内联显示功能，这意味着您不需要做任何事情来并排显示它们

这是一个证明它的小演示：

var svg=d3.选择（“主体”）
.selectAll（“费曼”）
.数据（[0,1]）
.输入（）
.append（“svg”）
.attr（“宽度”，100）
.attr（“高度”，100）
.style（“背景色”，函数（d）{
返回d？“蓝色”：“橙色”；
});
有很多方法可以将它们并排移动，但要使SVG“响应”，您需要将宽度和高度属性替换为viewbox。默认情况下，SVG将并排移动，您不必定义viewbox或任何东西，但前提是有足够的空间放置它们。在这里检查我的答案：。窗口宽度中可能没有1760px。默认情况下，svg是块元素。我不明白为什么上面的评论有两个“向上投票”。。。SVG在默认情况下是内联的：同样，在我的链接回答中这一点非常清楚。您需要特别地将父容器设置为足够宽，以便将它们并排放置。这非常有趣，因为我找不到明确说明这一点的规范。我非常确定SVG在默认情况下会被视为块元素，但是，为了证明您的错误，我无法找到任何支持这两种假设的引用。你知道这样一个引用吗？或者你知道默认值是如何隐式派生的吗？我已经读过好几次（不幸的是，我现在不记得这些站点了），SVG默认是内联的，所以现在我把这一点记在心里了。在我对问题的评论中共享的MDN链接中，inline是粗体的，我假设这是他们用来指定默认值的方式。LeBeau in也说了同样的话。此外，根据Amelia Bellamy Royds（她写了一本关于SVG的书）的说法，SVG默认是内联的：无论如何，我们可以通过运行代码片段来检查这一点：它们的行为是内联的（或内联块），而不是块。HTML中的SVG默认是内联的，与
img
和
object
等一致。我不知道它是在任何地方指定的（它有点迷失在HTML、CSS和SVG规范之间）。但是
inline
是未指定其他值的任何元素的
display
的初始值。例如，SVG应该被视为一个“对象”，它可能具有内部大小和/或纵横比。这也意味着
display:inline
的行为类似于
inline block
。我认为许多人认为SVG默认为display:block的原因是，如果给SVG一个
viewBox
，但没有宽度/高度，所有现代浏览器都会将其拉伸到整个容器的宽度。因此，即使从技术上讲它仍然是一个内联对象，它看起来就像是块，因为它占据了布局中的一整行。