javascript - SVG 元素不遵守 CSS 命令，它总是位于屏幕中间，我不知道为什么？

Question

我将一个包含多个 SVG 元素的网页放在一起，即使 x,y 坐标设置为 0,0 并且使用的 CSS 指示它位于页面左侧，SVG 只是位于在中间。

这是指向在 jsFiddle 中复制的问题的链接:

https://jsfiddle.net/wf806vvL/

这是 HTML:

svg {
  float:left;
  content-align: left;
  padding-left: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" id="circleGroup" width="100%" height="100vh" viewBox="0 0 700 1000">
  <circle id="circle" class="circle" cx="100" cy="125" r="20" fill="#1dacf9" stroke="black" stroke-width="2"/>
</svg>

我已经尝试了所有与我可以尝试的位置相关的不同 CSS 样式，以及将 SVG 保存在一个 div 中并对其应用定位，这些都不起作用。

我对 CSS 和 HTML 的了解有限，这意味着我已经没有什么可以尝试的了，因为它可能很明显是我遗漏的东西，所以我想我应该把它贴在这里。

有人知道为什么会这样吗？

Answer 1

圆圈未位于 viewbox 的中心。

使用 viewBox="0 0 700 1000"，您的圆的中心坐标将为 cx="350"cy="500"

svg {
  width: 25%;
  /* for demo */
  margin:auto;
  display:block;
  border: 1px solid grey;
}

<svg xmlns="http://www.w3.org/2000/svg" id="circleGroup" viewBox="0 0 700 1000">

  <circle id="circle" class="circle" cx="350" cy="500" r="20" fill="#1dacf9" stroke="black" stroke-width="2" />
</svg>