D3.js Quick Start Guide

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