沿着一條線或一條路徑移動一個SVG對象

Question

我想動畫一個SVG對象，以便它遵循我從d3.js中的線條生成器構建的SVG路徑。有沒有簡單的方法來實現這一點？特別是，我想獲得對應於我的路徑的插值座標。從那裏，使用tween.js或d3.js本身很容易執行動畫。

Answer 1

據我所知，在D3中無法輕易獲得插值SVG路徑的座標，即您可能必須自己進行插值。

要沿着該路徑動畫一個SVG對象，您不需要使用D3。您可以使用SVG <animateMotion>元素來獲取本機SVG動畫 - 例如，請參閱here。

Answer 2

您可以修改此示例：http://bl.ocks.org/mbostock/1705868

在這種情況下，圓沿着使用SVG的getTotalLength和getPointAtLength的SVG路徑轉換。您應該能夠用任何SVG對象替換該圓。