CODEWITHSUNDEEP
javascriptcsssvgreact-vis
Karl Stefan
Karl Stefan

Reputation: 160

SVG "z-index" workaround

I am working on a dashboard that is displaying three gauges, that each highlight some part of a dataset that form a 'donut graph'. The design calls for 4px stroke on the highlighted part of the dataset, but because of the SVG draw order, this becomes a problem when the last item in the dataset gets its stroke overlapped. See image. https://i.sstatic.net/N1mK2.jpg

example

Anyone got any clever workarounds?

Upvotes: 0

Views: 169

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31750

There are workarounds, but they tend to be hacks (for example, you can draw the grey background in another inline SVG that's z-index positioned underneath the inline SVG that draws the highlighted sections.) The right answer is to draw the background first, then all the highlights.

Upvotes: 1

Related Questions