Programmatically change the stroke length of an SVG circle

Question

I created a circle in Inkscape and turned off the fill so that only the stroke was visible, and set the start point to 45 degrees and the end point to 315 degrees. Then I rotated it 90 degrees and this is the final result.

P粉036800074 · Answer

Probably the easiest way is to use the pathLength attribute像：

pathlength="100" stroke-dasharray="10 100"

Change the first value of rinkle- dashharray to represent "percentage" (10 in the example above makes it 10% of the total length). Moving the segment along the path is possible thanks to the negative rinkle- dashoffset. The interesting thing about this approach is that it can be used to "trace" any compact path:


Length:
 10

Offset:
 20

P粉310931198 · Answer

The following code snippet takes a percentage as input and then computes the parameters of the Elliptic Arc Curve command A in the element. 100% corresponds to three-quarters of an arc.

var path = document.getElementById("path");
function draw(v) {
  var theta = v * Math.PI * 0.015;
  var large = theta