Help with dashed or dotted arc

[modem]

I am trying to draw an arc with dash or dotted border, I have tried using border css and stroke-dasharray (SVG property) but that didn't helped. Can anyone share some sample code or point me to the direction for generating a dotted arc. eg: Similar to Chronograph watch face by fitbit.

Thanks in advance.

[redshifteric · Accepted solution]

Hi modem, 

have you tried the following options:

- using an image (not the best I agree)

- creating as many arcs as dash/dots you want in your dotted circle by changing the start-angle

eg:

 <arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="359" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="29" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="59" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="89" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="119" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="149" sweep-angle="2" />
<arc x="30" y="30" width="240" height="240" fill="white"
arc-width="10" start-angle="179" sweep-angle="2" />
...

I think the second option is more well suited.

This may not be the best way, but this works.

[modem]

Thanks for the reply, Yes i did thought about using an image but I was looking for a more programmatic approach rather then relying on image. Before going ahead with the 2nd approach i would like to see if there is any other option available. Creating dash or dotted arcs by assembling a series of smaller arcs seems like an overkill for something that should be easily achievable.

[JonFitbit]

There isn't a simple way for this unfortunately, I'd try the approach above.

[LifeOmic-Dev]

I needed to do something similar with a spinning dashed circle.  I tried both approaches and would recommend the image approach in the end.  While the arc one is nicer from the standpoint of a developer, it did not perform efficiently on a physical device.

I would also recommend using this page as a reference for the image.  The functionality around grayscale images lets you easily change border color without having to touch the source image.