Applying CSS styles to SVG elements

SVG elements can be styled identically to the way HTML elements are styled. The same CSS with ID and class attributes can be used to direct styles to the SVG elements, or you can just use the style attribute directly and specify CSS as its content. However, many of the actual styles in HTML differ in SVG. For example, SVG uses fill for a rectangle, whereas HTML would use background for a div tag that represents a rectangle.

In this book, we will generally try to avoid using CSS, and explicitly code the style attributes using the functions provided by D3.js. But many examples on the web do use CSS combined with SVG, so it is worth a quick mention.

The following example demonstrates styling SVG with CSS. The example ...

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.