書名： D3.js Quick Start Guide
作者名： Matthew Huntington
本章字?jǐn)?shù)： 195字
更新時(shí)間： 2021-07-16 17:36:41

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:

官术网_书友最值得收藏!

D3.js Quick Start Guide

Positioning an element