javascript - 我可以使用捕捉修改现有路径上的点吗？

Question

我有一个带有路径元素的 SVG:

<path d="M54.7,0.8 L111.8,73.4 L79.9,126.1 L27.9,128.7 L0.5,74.2 L54.7,0.8 Z" id="Shape"></path>

我了解 SVG path's meaning :

• M 移动到一点
• Ls 画线
• Z 闭合路径，生成多边形

并且知道我可以通过以下方式获得 SnapSVG 可操作对象:

var graph = Snap(".graph");
var item = graph.select('#after #Shape');

但是我找不到如何修改 the Snap docs 中的路径。我查看了项目的 paper.path但我看不到任何改变路径的例子，只有新的。

如何修改 SnapSVG 中的现有路径？ 理想情况下，我希望以动画方式呈现路径的变化，即从旧多边形到新多边形。

Answer 1

您可以像其他 SnapSVG 项目一样为 d ( path descriptions ) 设置动画:

var graph = Snap(".graph");
var item = graph.select('#after #Shape');

获取现有积分:

item.attr('d')

然后为它们设置动画:

item.animate({
  d: "M81.8,0.1 L146.8,85.1 L124.1,164.4 L39.7,164.4 L0.6,79.7 L81.8,0.1 Z"
}, 1500, mina.easeout)