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://i.stack.imgur.com/N1mK2.jpg

example

Anyone got any clever workarounds?

Karl Stefan
  • 150
  • 2
  • 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
  • 30,283
  • 6
  • 81
  • 105