SVG - Arc

[SunsetRunner]

How can i change sweep-angle on runtime?

GUI:

<arc id="steps" x="30" y="20" width="100" height="100" fill="fb-lime"
arc-width="10" start-angle="0" sweep-angle="90" />

JS:

var arcSteps = document.getElementById("steps");

arcSteps.sweep-angle = "120"; <--- it doesnt work, build failed

arcSteps.sweepAngle = "120"; <--- it has no impact

[JonFitbit · Accepted solution]

Some of our SVG are lacking in this release. sweepAngle should be in the next update though!

[agsurf5]

Will start-angle be in it as well? I am going through the same issue.

Ps how do you guys do the circles in the watch faces without this function? Do you have an alternative idea/coding you are using?

[FlyBoyJIt]

Sorry for the bump, but this is something Im working on as well. Wondering how this is currently implemented in the gauges clock face. 

[Chuck45]

when is the next release that would have start-angle & sweep-angle that can be changed during run-time?

[agsurf5]

xxxxx.sweepAngle started working for me.

I am not sure if there have been changes, but it does work now.

[Chuck45]

What function did you call to change the start angle and or sweep angle? 

Also, when setting SVG style values from within JavaScript, how do I tell it 100% (or any percent actually)?

Thx!
Chuck

[agsurf5]

My code for sweepAngle is basically:

import document from "document";

let tideArc = document.getElementById("tideArc");

function processTideData(data) {

  var time = data[1].date;
  var epoch = data[1].dt;
  var orario = new Date(epoch * 1000);
  let now = Date.now();
  var timeDiff = Math.round((orario-now)/120000);
  
  tideArc.sweepAngle = Math.abs(180-timeDiff)
  
  }

[bryantee]

I can confirm this is also working for me. Quite exciting.

[Dcable]

Did you every figure out how to set a start angle?

[fbdev]

Hi, 

Did you ever get this solved? I am experiencing the same issue. 

Thanks.

[fbdev]

NVM. I had a conflicting script in my code! thanks.