以程式設計方式變更 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)}`);
}

  %