Ändern Sie programmgesteuert die Strichlänge eines SVG-Kreises

Question

Ich habe in Inkscape einen Kreis erstellt und die Füllung deaktiviert, sodass nur der Strich sichtbar war, und den Startpunkt auf 45 Grad und den Endpunkt auf 315 Grad eingestellt.

Ich habe es dann um 90 Grad gedreht und das ist das Endergebnis.

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

Der Rendering-Effekt ist wie folgt:

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

Ich möchte die Kopie überlagern und die Länge des Strichs beginnend in der unteren linken Ecke steuern können. Beispielsweise nur 22 % der Gesamtlänge der Überlagerung anzeigen oder ein Liniensegment von einem Endpunkt von 315 Grad bis 255,60 Grad anzeigen?

Wie würden wir dieses Problem lösen (Start- und Endkontrollen von Inkscape programmgesteuert und effizient implementieren)?

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 

%