0

If I use a very small stroke-dasharray on a circle, it produces strange "rectangle-like" shape in the middle of the circle. What causes this behavior and is there a way to solve it?

Chrome stroke-dasharray:0.6 and lower fails Firefox stroke-dasharray:2 and lower fails

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.6, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="0.7, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="2, 10000"></circle>
</svg>

<svg viewBox="0 0 100 100" style="width:800px;height:800px;">
  <circle cx="50" cy="50" r="50" fill="black" stroke="red" stroke-width="100" stroke-dasharray="3, 10000"></circle>
</svg>

enter image description here

Roland Soós
  • 3,125
  • 4
  • 36
  • 49
  • I can confirm you findings, on Firefox for me it looks even worse. `shape-rendering:geometricPrecision` seems to have no effect. After looking through the shape computation instructions in the [SVG 2 spec](https://svgwg.org/svg2-draft/painting.html#StrokeShape), I'd call it a bug, but take that comment into account: "Authors should be aware that the shape of a stroke may in some cases, such as at extremely tight curves, differ across platforms." – ccprog May 17 '18 at 13:46
  • Using dash arrays for this purpose is a bit of a hack. If you do it properly (by generating circular sectors as shapes) you won't have this problem. – Paul LeBeau May 18 '18 at 06:57

0 Answers0