我试图扭转这条SVG线的动画效果。我需要这条线从左到右绘制，但只能让它从右到左工作。我试着在插画中改变终端，但这只导致它从两边绘制。我该怎么做？你可以在这里看到动画：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;
}
}
如您所知，strow-dasharray属性创建了一个虚线模式。当该值被分配为1400时，这意味着虚线的长度和虚线之间的空格是1400。也就是说，对于0到1400，该行将存在，从1400到2800将存在一个虚线。
现在，当您将笔画偏移量从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>