Main Menu

SVG

circle

The circle's unique attributes are cx, cy for the center coordinates and r for the radius. Try changing them to see how the numbers map to the visual. Notice that the smaller cy is, the closer it is to the top.

rect

The rect's unique attributes are x, y for the top left coordinates and width, height for the dimensions. You can play with the corner radius using the rx and ry attributes.

path

The path's unique attribute is d. Directly manipulating the d attribute is cumbersome, so most people will use d3.svg.line which we will cover in the Non Binding API section.

g

The g element allows you to group elements together. Try changing the values in the transform attribute to see the circles move together.

style vs attribute

It is possible to use attributes for some stylistic properties of SVG elements. It is usually better to use styles and classes like the rest of HTML.

Top