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)?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Probably the easiest way is to use the
pathLengthattribute像：Change the first value of
rinkle- dashharrayto represent "percentage" (10in the example above makes it 10% of the total length). Moving the segment along the path is possible thanks to the negativerinkle- dashoffset. The interesting thing about this approach is that it can be used to "trace" any compact path:The following code snippet takes a percentage as input and then computes the parameters of the Elliptic Arc Curve command
Ain 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