如何从SVG中动画虚线(使用HTML、CSS和/或JavaScript)

Question

我正在做一个设计，需要一堆不同的虚线动画。我需要做好这段代码所做的工作：https://codepen.io/Evgeny/pen/IEGoq

但是当我把我自己的SVG代码拷贝到那支笔里时，它就不动了。

这是我的SVG代码：

<svg width="1400px" height="892px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="outer-vector" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector" transform="translate(-40.000000, -65.000000)" stroke="#34A9D6" stroke-width="2">
            <path d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-3"></path>
        </g>
    </g>
</svg>

如果我把它复制进去，那它就是静态的。

如果我然后将类path添加到<path>-object中，那么它是有动画的，但不像原来的一行。

我如何使我的虚空SVG-文件动画，以同样的方式，与代码？

还有这支钢笔( https://codepen.io/nevolgograd/pen/WOLaKB )，它有我想要的效果，但我的虚线SVG线也没有动画。

Addition1

虚线需要在图像的上方，所以我不能简单地在第一条线上画第二条线，它会随着笔画而逐渐移除--dashoffset/dasharray技巧。

Answer 1

因此，不幸的是，大多数事情都不能通过复制/粘贴到另一个例子中来神奇地工作。所以，你在这里看到的东西会让你更接近你想要的东西，在你努力调整你的价值观，得到你想要的东西之后，如果你仍然被封锁了，我们会帮你解决问题，但就我个人而言，我不喜欢提供一个完整的答案，当唯一的努力是粘贴到其他东西上，并期望它只是工作，而不试图学习，为什么不像预期的那样工作。

看看样本中的差异，<g>标记是无害的，而且笔画属性需要匹配您自己的示例，而不是它们的。

你会注意到我改变了一些东西让你开始，干杯！

​

.dashed{
  stroke-dasharray: 10;

}
.path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  animation: dash 2s linear alternate infinite;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1700;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="700px" height="446px" viewBox="0 0 1400 892" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="outer-vector" stroke="none" stroke-width="1" fill="none" stroke-linejoin="round" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector" transform="translate(-40.000000, -65.000000)" stroke="red" stroke-width="4">
            <path class="stroke" stroke-miterlimit="10" d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-3"></path>
        </g>
    </g>
  <g id="outer-vector2" stroke="none" stroke-linejoin="round" stroke-width="2" fill="none" fill-rule="evenodd" stroke-dasharray="19.796,19.796">
        <g id="inner-vector2" transform="translate(-40.000000, -65.000000)" stroke="white" stroke-width="4">
            <path class="path" stroke-miterlimit="10" d="M41,956 C436.408926,930.206693 476.595836,649.998441 667.229605,409.842185 C811.794179,227.722893 1042.8769,68.6364821 1581,61" id="Stroke-32"></path>
        </g>
    </g>
</svg>

​