我可以使用Snap修改现有路径上的点吗？

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)