反向 SVG 画线动画

Question

我正在尝试反转这条 SVG 线的动画效果。我需要这条线从左到右绘制，但只能让它从右到左工作。我尝试在 illustrator 中更改终点，但这只会导致它从两侧绘制。我该怎么做呢？你可以在这里看到动画：http://mckeever02.github.io/voxbit/

这是 SVG：

<svg viewBox="0 0 759.7 234.2">
    <path class="phone-line" stroke="#fff" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
  </svg>

以及用于动画的 CSS：

.phone-line {
  stroke-dasharray:1400;
  -webkit-animation: draw 4s ease-in;
}

@-webkit-keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

Answer 1

如您所知，stroke-dasharray 属性创建了一个虚线模式。当该值指定为 1400 时，这意味着短划线的长度和短划线之间的间隔为 1400。也就是说，对于 0 到 1400，这条线将存在，而从 1400 到 2800 将存在一条短划线。

现在，当您将 stroke-dashoffset 从 1400 更改为 0 时，它会从一个方向看到线。最初偏移量为 1400，因此只有破折号可见（没有线条）。当偏移设置为 0 时，虚线向左移动，线（从 0 到 1400）慢慢进入视野。

从另一个方向执行此操作的简单方法是将其从1400 动画化到2800。完成此操作后，随着线（从 2800 到 4200 出现）慢慢进入视野，破折号向右移动。

.phone-line {
  stroke-dasharray: 1400;
  animation: draw 4s ease-in;
}
@keyframes draw {
  from {
    stroke-dashoffset: 1400;
  }
  to {
    stroke-dashoffset: 2800;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox="0 0 759.7 234.2">
  <path class="phone-line" stroke="#000" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
</svg>

---

另一种方法（如comments 中的Paul LeBeau 所述）是将其从-1400 动画化到0。这也会产生与上述 sn-p 相同的输出。

.phone-line {
  stroke-dasharray: 1400;
  animation: draw 4s ease-in;
}
@keyframes draw {
  from {
    stroke-dashoffset: -1400;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<svg viewBox="0 0 759.7 234.2">
  <path class="phone-line" stroke="#000" stroke-width="4" stroke-dashoffset="20" fill="none" class="st0" d="M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
    M755.6,229.7H540.1c-31.9,0-57.6-27-57.6-58.9l0-5.8V61.6c0-31.9-26.1-58-58-58h-40.8h-7.9H335
        c-31.9,0-58,26.1-58,58v103.3v6.8c0,31.9-26.1,58-58,58H11.55" />
</svg>

注意：在我看来，理想的方法是将path 本身的方向更改为从左侧开始并向右移动，而不是从右向左移动。这只是一个简单的解决方法，可以在不更改 path 的情况下反转方向。