时间戳

首页 > 解决方案 > 如何为 SVG 中的虚线设置动画（使用 HTML、CSS 和/或 JavaScript）

javascript - 如何为 SVG 中的虚线设置动画（使用 HTML、CSS 和/或 JavaScript）

问题描述

我正在做一个设计，需要有一堆不同的虚线动画。我需要它完全按照这个 Codepen 的方式完成：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，那么它就是动画，但不像原始行那样。

如何以与 Codepen 相同的方式为我的虚线 SVG 文件制作动画？

这里还有这支笔（https://codepen.io/nevolgograd/pen/WOLaKB），它具有我所追求的效果，但我的 SVG 虚线在那里也没有动画。

加法1

虚线需要在图像的顶部，所以我不能简单地在第一条线的顶部制作第二条线，它会通过 stroke-dashoffset/dasharray 技巧逐渐删除。

标签： javascriptcsssvg

解决方案

所以不幸的是，大多数事情不会只是通过将某些内容复制/粘贴到另一个示例中而神奇地工作。因此，您将在此处看到的内容将使您更接近您正在寻找的内容，并且经过一些努力调整您的值以获得您想要的内容，如果您仍然被阻止，我们会为您分类，但个人当唯一的努力是将某些东西粘贴到其他东西中并期望它能够正常工作而不试图了解为什么它没有按照预期的方式工作时，我不喜欢提供完整的答案。

查看您的样本中的差异，<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>

推荐阅读