SVG：查找曲線上的點

編輯：答案（對於getPointAtLength來說，@musically_ut得分，但似乎我必須自己做真正的工作）注意：「draw.circle」-syntax來自svg.js ）SVG：查找曲線上的點

添加你自己的ID的路徑與.attr({id: "mypath"});
找到它：var a = document.getElementById("IdOfSvgCurve");
繪製曲線上的幾個圈子。座標必須與起點相關。

var pt_start = a.getPointAtLength（0）;對於（var i = 0; i < len; i ++）{
var var = a.getPointAtLength（i * 10）; var c = draw.circle（7） .fill（{color：「green」}） .move（pt.x - pt_start.x，pt.y - pt_start.y）; }

原題：

說我有一個SVG曲線，可能是一個貝塞爾或橢圓

<path id="SvgjsPath1044" d="M 125,75 a100,50 0 0,0 100,50"/>

我怎樣才能把點右上曲線？就像這樣：

這可能是使用類似的路徑長度，使用一個「座標系」，也可能是通過實際calculting是曲線上的點，並使用其座標添加。

這主要是爲了說明，所以我不一定需要一個通用的解決方案。

我正在使用svg.js庫，但可以「本地」執行此部分。

謝謝！

2013-12-12 graph

在這種情況下，路徑代表一個數學函數，所以您可以用代數方法計算函數上的點。 – sbking

Snap.svg也有一個'intersection'方法，它可以找到兩個路徑的交集。您可以創建臨時垂直線路徑，計算交點，在這些交點處添加點，並刪除垂直線。 – sbking

那麼，看看[實際的SVG文件]（https://upload.wikimedia.org/wikipedia/commons/4/41/Interpolation_example_polynomial.svg），看看它是如何完成的！誠然，它的來源是可怕的。 – Bergi

SVGPathElement有一個功能getPointAtLength()。

您可以使用此功能查找路徑上的點，然後將circle元素放置在這些位置。

2013-12-12 22:28:15

我認爲他寧願想要某種'getPointAtXCoordinate'函數...... – Bergi

回答