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

【问题标题】：Css animation - Show/Hide logo with an handwriting svg effectCss 动画 - 显示/隐藏带有手写 svg 效果的徽标
【发布时间】：2016-12-09 01:33:42
【问题描述】：

我正在模拟svg 的手写动画，当用户按住鼠标时会激活该动画。根据source，为了创建这种效果，我将徽标与徽标本身的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()); 抛出一个错误，指出它不是一个函数。
徽标应该在开始时隐藏并在点击时显示出来，反之亦然，并且响应速度很慢。

你知道我做错了什么吗？

提前感谢您的回复！

【问题讨论】：

呃，getTotalLength 函数到底在哪里？此外，您正在获取数组中项目的长度？应该是logoElements.length 而不是logoElements[i].length
它包含在 svg 路径元素中：developer.mozilla.org/en-US/docs/Web/API/SVGPathElement
包括在内，但您还没有检查它的支持范围。该徽标在页面加载时为我隐藏，并在点击时显示。

标签： javascript css svg css-animations

【解决方案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

【讨论】：