Scalable vector graphics | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Scalable vector graphics

I have two SVG elements in my code, square and circle, the issue, after coding they seem to overlap when displayed on the web, can anyone help me on how to separate these SVG elements, the code are thus: <!DOCTYPE html> <html> <head></head> <body> <svg align ="center"width="2000" height="2000"> <circle cx="80" cy="80" r="50" fill="violet" /> <rect width="300" height="100" x="20" y="20" fill="green" /> </svg> </body> </html>

24th Jan 2018, 9:47 AM
James Abiola Bisiriu
James Abiola Bisiriu - avatar
2 Answers
+ 9
Use the x and y coordinates of either the circle or rectangle to position them the way you like. Changing the value of attribute y may move the rectangle downwards/upwards depending upon the value.
24th Jan 2018, 10:01 AM
Dev - avatar
+ 1
Thanks DEV
24th Jan 2018, 10:04 AM
James Abiola Bisiriu
James Abiola Bisiriu - avatar