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粉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:
Offset:
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)}`); }