以编程方式更改圆形SVG笔划的长度？

Question

我在 Inkscape 中创建了一个圆圈并关闭了填充，以便只有笔划可见，并将起点设为 45 度，终点设为 315 度。

然后我将其旋转 90 度，这就是最终结果。

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

它呈现如下：

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

我希望能够覆盖副本并控制从左下角开始的笔画长度。例如，仅显示覆盖总长度的 22% 或显示从 315 度终点到 255.60 度的线段？

我们将如何解决这个问题（以编程方式有效地执行 inkscape 开始和结束控制）？

Answer 1

可能最简单的方法是使用如下pathLength属性：

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

更改第一个值stroke-dasharray将表示“百分比”（10在上面的示例中使其占据总长度的 10%）。由于 Negative ，沿着路径移动该段是可能的stroke-dashoffset。这种方法的有趣之处在于它可以用于“跟踪”任何紧凑路径：

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