2

I'm using a <circle> element with stroke-dasharray and stroke-dashoffset to draw an indicator for the focused element of a donut chart, and in Safari it is not coming out right.

The outer pies are <path>s which work fine in all browsers, but as I need the indicator to transition between sectors they need to be <circle>s.

I thought it was because Safari was calculating the circle's circumference based on the svg viewbox or something like that but no dice. Any help would be appreciated.

https://codepen.io/pouretrebelle/pen/d56df310e385a0c2fdedb5bbddc2308d

Rendered in Chrome: Chrome

Rendered in Safari: Safari

Charlotte Dann
  • 298
  • 2
  • 10
  • 1
    I've tested it with `viewBox="-100 -100 200 200"` and had no problems. Maybe Safari have a hard time with very small numbers – enxaneta Jan 18 '19 at 18:09

0 Answers0