search

Home  >  Q&A  >  body text

Programmatically change the stroke length of an SVG circle

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)?

P粉788571316P粉788571316244 days ago344

reply all(2)I'll reply

  • P粉036800074

    P粉0368000742024-03-29 15:46:23

    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

    reply
    0
  • P粉310931198

    P粉3109311982024-03-29 10:54:22

    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)}`);
    }
    
     
     
    
    
    %

    reply
    0
  • Cancelreply