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

I have put together a web page with multiple SVG elements on it, even though the x,y coordinates are set to 0,0 and the CSS used instructs it to position on the left side of the page, the SVG just sits in the middle.

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

This is a link to the issue replicated in jsFiddle:

这是jsFiddle中复制的问题的链接：

https://jsfiddle.net/wf806vvL/

Here is the HTML:

这是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>

I have tried every different CSS styling that relates to position that I could try, as well as holding the SVG in a div and applying positioning to that, none of this works.

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

My limited knowledge of CSS and HTML means I have run out of things to try, and since its probably something obvious that I'm missing I thought i'd post it here.

我对CSS和HTML的了解有限，这意味着我已经没有尝试过的东西，因为它可能是我想念的东西，我想我会在这里发布。

Anyone know why this would be?

谁知道为什么会这样？

2 个解决方案

#1

The circle isn't centered in the viewbox.

圆圈不在视图框中居中。

With viewBox="0 0 700 1000" the center co-ordinates of your circle would be cx="350" cy="500"

使用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>

#2

Changing height="100vh" to 100%, and setting cx to 21 and cy to 100 places the circle where you want it (as far as I understood):

将height =“100vh”更改为100％，并将cx设置为21并将cy设置为100将圆圈放置在您想要的位置（据我所知）：

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

#1