CODEWITHSUNDEEP
javascripthtmlcsssvg
Andrew
Andrew

Reputation: 33

SVG element is not respecting CSS commands, it always sits in the middle of the screen and I don't know why?

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.

This is a link to the issue replicated in jsFiddle: 

https://jsfiddle.net/wf806vvL/

Here is the 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.

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.

Anyone know why this would be?

Upvotes: 0

Views: 82

Answers (2)

ppasler
ppasler

Reputation: 3719

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):

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115047

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"

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>

Upvotes: 1

Related Questions