Css动画-显示/隐藏带有手写svg效果的徽标

Question

我正在模拟一个svg的手写动画，当用户按住鼠标时会激活它。根据这个source，为了创造这一效果，我是重叠的标志与一个svg，这是标志本身的stroke线，我正在将颜色转向transparent来显示它。

徽标应在mousedown上显示，并通过以下脚本再次隐藏在mouseup上：

var logoElements = document.querySelectorAll('#first svg *');
var down = false;

function checkMousePosition() {
  for (i = 0; i < logoElements.length; i++) {
    if (down == true) {
      console.log(logoElements[i].getTotalLength());
      logoElements[i].classList.add("animation-forward");
      logoElements[i].classList.remove("animation-backward");
    } else {
      logoElements[i].classList.remove("animation-forward");
      logoElements[i].classList.add("animation-backward");
    }
  }
}

下面是一个具有完整代码的fiddle。这似乎是可行的，但目前我有以下问题：

• console.log(logoElements[i].getTotalLength());抛出一个错误，说明它不是一个函数。
• 标志应该隐藏在开始和被显示在点击，而不是反之亦然，责任是缓慢的。

你知道我做错了什么吗？

谢谢您的回复！

Answer 1

首先，getTotalLength只工作宽度路径，因此您必须编写自己的函数来获取其他元素的长度或将它们转换为路径(应该很简单，因为它们只是行)。

然后使用这个js：

var logoElements = document.querySelectorAll('#first svg path');
for (i = 0; i < logoElements.length; i++) {
    logoElements[i].style["strokeDasharray"] = logoElements[i].getTotalLength();
    logoElements[i].style["strokeDashoffset"] = 0;
}

function checkMousePosition(down) {
  for (i = 0; i < logoElements.length; i++) {
    if (down) logoElements[i].style["strokeDashoffset"] = logoElements[i].getTotalLength();
    else logoElements[i].style["strokeDashoffset"] = 0;
  }
}

document.addEventListener('mousedown', function mouseState(e) {
  checkMousePosition(true);
});

document.addEventListener('mouseup', function mouseState(e) {
  checkMousePosition(false);
});

将例如transition: stroke-dashoffset 1s;添加到#first path中