SVG Rounded Arc

[Fitbble]

Hi,

is there any "easy" way to make a rounded edge arc?

Something like the upper picture.

My first idea was to put circles at the end and start of the arc but guess the circle position depending on the arc angle it seems pretty hard.

Is there any prop any arc property I'm missing?

Thanks!

[sbtn]

As far as I know at the moment there is no working property in the SDK to get a round capped arc. There are a few different ways to achieve it and your idea about the circles seems to be the most popular. I've got some code here for a simple example done purely within SVG but you should be able to achieve what you are wanting to do by animating the same properties (rotation & sweep-angle) with javascript.

<svg>
  <!-- Arc - transform animation -->
  <g transform="translate(50%, 50%)">
    <arc x="-100" y="-100" width="200" height="200" fill="crimson" arc-width="20" start-angle="0" sweep-angle="0">
      <animate attributeName="sweep-angle" begin="load" from="0" to="360" dur="2" final="restore" repeatCount="indefinite"/>
    </arc>
  </g>
  
  <!-- Circle - Begining of arc (not animated) -->
  <circle cx="50%" cy="50%-90" r="10" fill="crimson" />
  
  <!-- Circle - End of arc (follows arc sweep point) -->
  <g transform="translate(50%, 50%)">
    <animateTransform attributeType="rotate" from="0" to="360" begin="load" dur="2" repeatCount="indefinite"/>
    <circle cx="0" cy="-90" r="10" fill="crimson" />
  </g>
</svg>

[Fitbble]

Your solution works perfect with static data.

The problem I'm facing now is that I'm trying to dinamically modify the "to" parameter of the <animate> from Javascript and as it works great on the simulator, on the watch it seems to be ignored:

<defs>
<symbol id="sym">
<g transform="translate(50%, 50%)"> 
<animateTransform id="animation" attributeType="rotate" begin="enable" dur="2" from="0" to="360"/>
<circle cx="-0" cy="-52" r="13" fill="cyan" /> 
</g> 
</symbol>
</defs>

<svg width="100%" height="100%">
<use id="instance" href="#sym" width="100%" height="100%" />
</svg>

var animation = document.getElementById("animation");
var instance = document.getElementById("instance");

animation.to = 70;
instance.animate("enable");

Any idea on how to modify the <animate> parameters dinamically?

[JonFitbit]

I've just tried it, and this is fixed in the next firmware update which is coming soon:trade_mark:. 

[Giampi71]

Hype!!!

Hitting F5 on community page like a crazy...

[sbtn]

Great news about the update. If you are looking for something to use with right away then you can access the circle groupTransform.rotate.angle and the arc sweepangle.

Here's a modified example with the SVG animations removed and some JS added. For the animation timing i have used requestAnimationFrame but you could use whatever you have to drive updates to the values.

<svg>
  <!-- Arc - sweep-angle modified in index.js -->
  <g transform="translate(50%, 50%)">
    <arc id="arc-sweep" x="-100" y="-100" width="200" height="200" fill="crimson" arc-width="20" start-angle="0" sweep-angle="0" />
  </g>
  
  <!-- Circle - Beginning of arc (not animated) -->
  <circle cx="50%" cy="50%-90" r="10" fill="crimson" />
  
  <!-- Circle - End of arc (follows arc sweep point) animated in index.js -->
  <g id="end-circle" transform="translate(50%, 50%)">
    <circle cx="0" cy="-90" r="10" fill="crimson" />
  </g>
</svg>

import document from "document";

const endCircle = document.getElementById("end-circle");
const arcSweep = document.getElementById("arc-sweep");

function animate() {
  endCircle.groupTransform.rotate.angle += 1;
  arcSweep.sweepAngle += 1;
  
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

[Fitbble]

Yes! That's the solution I'm using right now.

But very excited about the new version, applying animations dinamically will make the app cooler! 

[SpuriousWakeup]

@JonFitbit

Can you elaborate on "fixed"? How? An attribute?

[JonFitbit]

No, I was specifically referring to the ability to change the from/to attributes.

[SpuriousWakeup]

@JonFitbit So no plans for introducing stroke-linecap="round"?

[JonFitbit]

---

@SpuriousWakeup wrote:

@JonFitbit So no plans for introducing stroke-linecap="round"?

---

Not that I am aware of, but feel free to submit an SDK feature suggestion. https://community.fitbit.com/t5/Feature-Suggestions/idb-p/features/label-name/sdk/tab/most-kudoed

[jeremiahlee]

I have added this feature request here: https://community.fitbit.com/t5/Feature-Suggestions/Add-stroke-linecap-rounded-attribute-to-arc-SVG-...

Frustrating missing feature when it's a present feature on another SVG primitive.