SVG 路径 d：我期望（'M' 或 'm'），但得到 "NaN 0,0..100"

Question

我使用了 [skylake] 库 == svg 变形动画菜单 并且想做同样的菜单动画（svg 变形动画）像这样：http://jemimahbarnett.com。当您的鼠标进入时，svg 菜单会在您的鼠标离开时打开 && 关闭。我做到了，但在我的 chrome 控制台中我得到了： Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

如何正确解决？.那里是带有 svg 路径的动画菜单的 morph.js 指令文件：

https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

下面是我在我的项目中使用它的方式：

import S from 'skylake'

class HomeSvg {
  constructor() {
    S.BindMaker(this, ["menuOpen", "menuClose"])
  }
  init(t) {
    this.first = !1
    this.listeners("add")
  }
  listeners(t) {
    S.Listen("#nav-link-submenu", t, "mouseenter", this.menuOpen)
    S.Listen("#nav-link-submenu", t, "mouseleave", this.menuClose)
  }
  menuOpen(t) {
    this.first = !0
    this.isOver = !0
    S.Geb.id("nav-container").className = "active"
    this.isOver && !this.isAnimated && this.open()
  }
  menuClose(t) {
    this.first && (this.isOver = !1, S.Geb.id("nav-container").className = "", this.isOver || this.isAnimated || this.close())
  }
  open(t) {
    let i = this
    function s() {
      i.morph1Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 0,0 L 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver || i.close()
        }
      })
      i.morph1Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = "active"
    S.Geb.id("nav-morph-path").setAttribute("d", "M 0,0 L 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 Z")
    this.morphAnimation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 0,0 L 10,0 L 10,0 C 10,0 10,5 5,5 C 0,5 0,0 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-bottom", "3dy", -200, 0)
    tl.from("#nav-submenu-extend-left", "3dy", -200, 0)
    tl.from(".nav-submenu-link-title", "3dy", -100, 0, 500, "Power4Out", {delay: 400})
    tl.from(".nav-submenu-link-no", "opacity", -100, 0, 500, "Power4Out", {delay: 50})
    tl.play()
    this.morphAnimation.play()
  }

  close(t) {
    let i = this
    function s() {
      i.morph3Animation = new S.Morph({
        type: "path",
        element: S.Geb.id("nav-morph-path"),
        end: "M 10,0 L 10,0 C 10,0 10,0 5,0 C 0,0 0,0 0,0 L 0,0 Z",
        duration: 600,
        ease: "ExpoOut",
        callback: t => {
          i.isAnimated = !1
          i.isOver && i.open()
        }
      })
      i.morph3Animation.play()
    }
    this.isAnimated = !0
    S.Geb.id("nav-wrap").className = ""
    S.Geb.id("nav-morph-path").setAttribute("d", "M 10,0 L 10,10 C 10,10 10,10 5,10 C 0,10 0,10 0,10 L 0,0 Z")
    this.morph2Animation = new S.Morph({
      type: "path",
      element: S.Geb.id("nav-morph-path"),
      end: "M 10,0 L 10,10 C 10,10 10,5 5,5 C 0,5 0,10 0,10 L 0,0 Z",
      duration: 300,
      ease: "Power3In",
      callback: s
    })
    const tl = new S.Timeline()
    tl.from("#nav-submenu-extend-left", "3dy", 0, -200)
    tl.from(".nav-submenu-link-title", "3dy", 0, -100, 160, "Power2In")
    tl.from(".nav-submenu-link-no", "3dy", 0, -100, 160, "Power2In")
    tl.from("#nav-submenu-extend-bottom", "3dy", 0, -200, {delay: 160})
    tl.play()
    this.morph2Animation.play()
  }

  destroy(t) {
    // console.log(homesticky.destroy)
    this.listeners("remove")
    this.morphAnimation && this.morphAnimation.pause()
    this.morph1Animation && this.morph1Animation.pause()
    this.morph2Animation && this.morph2Animation.pause()
    this.morph3Animation && this.morph3Animation.pause()
  }
}


let homesvg = new HomeSvg()
homesvg.init()
export default HomeSvg

Answer 1

我修好了，错误在库代码中：https://github.com/ariiiman/skylake/blob/master/src/Animation/Morph.js

getArrfunction(t) 所在的位置存在隐式强制转换，将字符串威胁为数字：

S.Morph.prototype = {
  .............
  .............
  getArr: function(t) {
    for (var i = t.split(" "), e = [], s = 0; s < i.length; s++)
      for (var n = i[s].split(","), r = 0; r < n.length; r++) e.push(+n[r]); //this one causes the error
    return e
  },
  isLetter: function(t) {
    return "M" === t || "L" === t || "C" === t || "Z" === t
  },
  ...............
}

所以 e.push(+n[r]) 变成 e.push(n[r])。在 javascript 中，如果可能的话，可以使字符串成为数字（字符串中仅包含字符 0-9）。如果那不可能，结果是 NaN... 在我的例子中，它试图 push 一个连接（with(+)）并期望一个array (with method split()) of number 但找到了一个字符串，为什么我得到错误：Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "NaN NaN NaN NaN …".

现在运行良好！

SVG 路径 d：我期望（'M' 或 'm'），但得到 "NaN 0,0..100"

SVG path d: I expected ('M' or 'm'), but got "NaN 0,0..100"

javascript

animation

es6-class

svg-morphing