Svg shapes

Question

My circle is intended to be centred at the middle of the screen, but it's not =( Plz help me

https://code.sololearn.com/W2uC1V68iUhq/?ref=app

Answer 1

It is in the middle horizontally, but not vertically because your svg is not full screen (100%) And that is because of html margin and size...

So here is how to fix that with css:

body, svg, html{
width: 100%;
height: 100%;
margin: 0;
}

Here is a complete code:

https://code.sololearn.com/WEN31NVsrPFC/?ref=app

Answer 2

Rectangle

<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>

Circle

<circle cx="25" cy="75" r="20"/>

Ellipse

<ellipse cx="75" cy="75" rx="20" ry="5"/>

Line

<line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/>