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.

I then rotated it 90 degrees and this is the final result.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
 <path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>

Its rendering effect is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="300" height="300" version="1.1" viewBox="0 0 79.375 79.375" xmlns="http://www.w3.org/2000/svg">
 <path transform="rotate(90)" d="m64.961-15.355a34.984 34.412 0 0 1-49.474 1e-6 34.984 34.412 0 0 1-1e-6 -48.666 34.984 34.412 0 0 1 49.474-2e-6" fill="none" opacity=".55814" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="10.583"/>
</svg>

I want to be able to overlay the copy and control the length of the stroke starting from the bottom left corner. For example, only show 22% of the total length of the overlay or show a line segment from an endpoint of 315 degrees to 255.60 degrees?

How would we solve this problem (programmatically and efficiently perform inkscape start and end controls)?

Answer 1

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

Answer 2

The following code snippet takes a percentage as input and then computes the parameters of the Elliptic Arc Curve command A in the <path> 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 <= Math.PI ? 0 : 1;
  path.setAttribute("d", `M1,0 A1,1 0 ${large} 1 ${Math.cos(theta)},${Math.sin(theta)}`);
}

  %