我在 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 開始和結束控制）？
可能最簡單的方法是使用
pathLength屬性像：更改
rinkle- 的第一個值dasharray表示「百分比」（上例中的10使其佔據總長度的 10%）。沿著路徑移動該段落是可能的，感謝負面rinkle- dashoffset。這種方法的有趣之處在於它可以用於「追蹤」任何緊湊路徑：以下程式碼片段採用百分比作為輸入，然後計算 的參數橢圓弧曲線指令
A在<path>元素中。 100% 對應於四分之三弧。var path = document.getElementById("path"); function draw(v) { var theta = v * Math.PI * 0.015; var large = theta