以编程方式更改 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"

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

Length:
 
10


Offset:
 
20

Answer 2

以下代码片段采用百分比作为输入，然后计算 的参数椭圆弧曲线命令 A 在<path> 元素中。 100% 对应于四分之三弧。

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

  %