2

There's currently a bug in Chrome giving SVG circles edges, making them look like stop signs.

https://code.google.com/p/chromium/issues/detail?id=395474

Does anybody know of a temporary workaround?

Use case - pie timer animation: http://jsfiddle.net/frank_o/c62qmq1a/

<div class="svg_wrapper">
  <svg viewBox="0 0 600 425">
      <path d="M 175, 175 m 0, -75 a 75,75 0 1,0 0,150 a 75,75 0 1,0 0,-150" fill="none" stroke="black" stroke-width="110"/>
  </svg>
</div>
Mark Boulder
  • 13,577
  • 12
  • 48
  • 78
  • Can you draw with the shape instead of the stroke as in http://jsfiddle.net/7m522sm2/ ? – methodofaction Aug 15 '14 at 00:26
  • That looks pretty smooth! But unfortunately it seems to break the animation: http://jsfiddle.net/frank_o/c62qmq1a/ – Mark Boulder Aug 15 '14 at 02:22
  • Try two circles like this [fiddle](http://jsfiddle.net/alkhoo/pphf7tn3/). I'd used a different color to show the inner circle is smooth. Probably need 3 circles to make inner and outer circle smooth – Alvin K. Aug 15 '14 at 07:36
  • Still not round @AlvinK. – Mark Boulder Aug 16 '14 at 00:58
  • @Duopixel still there? – Mark Boulder Aug 16 '14 at 00:59
  • @MarkBoulder: Which version of Chrome are you using? The updated [3 path version](http://jsfiddle.net/alkhoo/pphf7tn3/2/). Fat strokes look like stop signs, thin strokes does not. – Alvin K. Aug 16 '14 at 07:04
  • @AlvinK. Hi, I'm on Chrome 36. You're right, thin strokes look fine. So what should we do? Is there a way to make http://jsfiddle.net/frank_o/c62qmq1a/ fully round or would we have to wait for that Chrome bug to be fixed? – Mark Boulder Aug 16 '14 at 09:33
  • Out of our control, have to wait this one out. Wondering if it would affect SVG font glyphs too. – Alvin K. Aug 16 '14 at 17:13

0 Answers0