以程式設計方式變更 SVG 圓的筆畫長度

Question

我在Inkscape中創建了一個圓圈並關閉了填充，以便只有筆劃可見，並將起點設為45度，終點設為315度。然後我將其旋轉90度，這就是最終結果。

P粉036800074 · Answer

可能最簡單的方法是使用 pathLength 屬性像：

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

更改 rinkle- 的第一個值dasharray 表示「百分比」（上例中的 10 使其佔據總長度的 10%）。沿著路徑移動該段落是可能的，感謝負面 rinkle- dashoffset。這種方法的有趣之處在於它可以用於「追蹤」任何緊湊路徑：


Length:
 10

Offset:
 20

P粉310931198 · Answer

以下程式碼片段採用百分比作為輸入，然後計算的參數橢圓弧曲線指令 A 在元素中。 100% 對應於四分之三弧。

var path = document.getElementById("path");
function draw(v) {
  var theta = v * Math.PI * 0.015;
  var large = theta