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

html html5 strings sololearn developer web language apps point

24th Jan 2018, 9:47 AM

James Abiola Bisiriu

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