O'Reilly logo

D3.js By Example by Michael Heydt

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

The basic shapes provided by SVG

Having some preliminaries out of the way, let's now examine the various SVG shapes that we will commonly use through the book. We have already seen how to create a circle; now let's look at some other shapes.

Ellipse

A circle is a special case of an ellipse that has an identical x and y radii. Ellipses can and often have different size radii. An ellipse is specified in SVG using the <ellipse> tag. We still use cx and cy attributes to position the ellipse, but instead of using r for radius, we use two attributes rx and ry to specify the radius in the x and y directions:

<ellipse cx="50" cy="30" rx="40" ry="20" />
Ellipse

Note ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required