SVG动画奇怪的伪像

Question

尝试制作动画：将svg转换为文本。为此，它使用 snap.svg 库。 我有两个具有相同节点数的svg文件：

---

文字：

---

但是，动画之后会出现奇怪的伪像。

以下是我的代码：https://jsfiddle.net/Ksiezyc/pLhmn3se/9/

以及主要的js动画变形：

var svg = document.getElementById("settings");
var s = Snap(svg);

var SettingsText = Snap.select('#text');
var SettingsIcon = Snap.select('#icon');

var SettingsTextPoints = SettingsText.node.getAttribute('d');
var SettingsIconPoints = SettingsIcon.node.getAttribute('d');



var toText = function() {
    SettingsIcon.animate({
        d: SettingsTextPoints
      },
      //5000, mina.backout, toIcon);
      10000, mina.backout);
    console.log("ToTEXT");
  }

  var toIcon = function() {
    SettingsIcon.animate({
      d: SettingsIconPoints
    }, 5000, mina.backout, toText);
    console.log("ToICONN");
  }

  toText();

我正在网上寻找信息，但没有找到解决该问题的方法。