Positioning an element

The <svg> tag is an inline element, such as an image (as opposed to a block element such as a <div>).  Elements within the <svg> are positioned similar to Photoshop, with a set of coordinates that follow the form (x,y).  An example of this could be (10,15), which translates to x=10 and y=15. This is different than HTML, where elements are laid out relative to one another. Here are some important things to keep in mind:

  • The point (0,0) is the upper–left corner of the <svg> element.
  • As y values increase, the point moves vertically down the <svg> element.
  • Don't confuse this with a typical coordinate system that has (0,0) at the lower–left corner with a point moving up, as y increases in value. This diagram shows the difference between a traditional coordinate system and an SVG coordinate system:

We can use negative x/y values:

  • -x: moves left
  • -y :moves up

Let's adjust the position of our circle in our previous section by adjusting cx and cy values (the x and y values for the center of the element):

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
    </head>
    <body>
        <svg>
            <circle r=50 cx=50 cy=50></circle>
        </svg>
    </body>
</html>

Now we see the full circle:

上一章目录下一章