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" />
Note ...
Get D3.js: Cutting-edge Data Visualization now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.