O'Reilly logo

Expert Data Visualization by Jos Dirksen

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

Add the text elements

While this might seem easy, and looks like something we already did earlier, there are some aspects of SVG we need to take into account. When we add a normal text element it is rendered either on top of the rectangles we drew or behind it, depending on whether we add it before or after the rectangle. If you've done some CSS you might know about the z-index property, which you can use to determine which element is rendered before another. This, however, doesn't apply to SVG elements. From the SVG specification: "Elements in an SVG document fragment have an implicit drawing order, with the first elements in the SVG document fragment getting "painted" first. Subsequent elements are painted on top of previously painted elements. ...

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