0

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://imgur.com/KYRnVJS

example

Anyone got any clever workarounds?

Karl Stefan
  • 140
  • 1
  • 8
  • https://stackoverflow.com/questions/17786618/how-to-use-z-index-in-svg-elements should help. You need to draw the 4px strokes items last methinks. – Gavin Simpson Apr 10 '19 at 18:21

1 Answers1

1

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.

Michael Mullany
  • 28,202
  • 6
  • 74
  • 98