由像素

縮短SVG路徑弧我有一個指向一個圓的圓弧的路徑：由像素

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"> 
<path d="M10,10 A120,120 0 0,0 200,100" stroke="green" stroke-width="5" fill="none" /> 
<circle cx="200" cy="100" r="10" stroke="black" stroke-width="5" fill="none" /> 
</svg>

現在我想的是，路徑結束例如圓的邊界前20像素（或幾個學位，如果簡單）：

如何歸檔呢？我如何計算不同的X和Y作爲弧線繪製的目標（在我的示例中爲參數d中的200,100）？

最後我會用D3這樣做，所以我需要一個算法。

來源

2017-02-26 flori

這可以很容易地通過應用stroke-dasharraytrick的變化來完成。你可以通過調用.getTotalLength()獲得路徑的總長度，減去你想的路徑，這個長度計算之前結束的長度，並相應地設置stroke-dasharray屬性：

var path = d3.select("path") 
 
    .attr("stroke-dasharray", function() { 
 
    return this.getTotalLength() - 20; 
 
    });

<script src="https://d3js.org/d3.v4.js"></script> 
 
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200"> 
 
<path d="M10,10 A120,120 0 0,0 200,100" stroke="green" stroke-width="5" fill="none" stroke-dasharray="100"/> 
 
<circle cx="200" cy="100" r="10" stroke="black" stroke-width="5" fill="none" /> 
 
</svg>

來源

2017-02-27 01:11:40 altocumulus

如果你想要通過幾何算法進行此操作，您必須首先從當前可用數據計算弧的屬性，例如中心（cx，cy），起始角，掃描角等...：半徑= 120，起始點（10 ，10），終點（200,100）和兩個標誌（大弧標誌和掃描標誌）。有關詳細信息，請參閱此link中的F6.5部分。一旦獲得這些信息，您就可以輕鬆計算出新的終點。

來源

2017-03-01 18:50:16 fang

回答

相關問題