仅 SVG（无 JS）- 线/路径动画答案

【问题标题】：SVG only (no JS) - line/path animation仅 SVG（无 JS）- 线/路径动画
【发布时间】：2018-12-12 06:34:28
【问题描述】：

我想不通这个...我不能真正在项目中添加标记，只能添加 CSS（出于许多无聊的原因，与我远程协作的人）。

最终客户希望他们的徽标路径被绘制但不是线性的加载动画，更轻松（慢 - 快 - 慢）之类的东西。为了说明我的意思，请参阅我所做的 jsfiddle：https://jsfiddle.net/tobzzzz/djf7oth2/（他们的徽标有点像语音标记，我为演示做了一个圆圈）。

徽标将位于图像背景之上，而不是白色/纯色背景，因此我的小提琴解决方案不适用于两个分层的圆圈。我添加了浅灰色背景来演示它是如何不起作用的。

理想的解决方案是仅使用 SVG（使用 SVG 动画而不是 CSS 动画），然后我会将其转换为数据并将其作为背景图像。

如果仅使用 SVG 动画无法完成，我想知道是否可以使用 SVG 和 CSS 组合来完成。但绝对100%不可能是JS。

有什么好主意吗？

body {
  background: #eee
}

.black {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash 4s linear infinite;
}

.white {
  stroke-dasharray: 350;
  stroke-dashoffset: 350;
  animation: dash2 4s ease-in-out infinite;
}

@keyframes dash {
  80% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash2 {
  100% {
    stroke-dashoffset: 0;
  }
}

<svg class="path" width="84" height="84" xmlns="http://www.w3.org/2000/svg">
      <path class="black" fill="none" stroke="#000000" stroke-width="4" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
      <path class="white" fill="none" stroke="white" stroke-width="5" d="M 80.889194,41.80541 C 80.889194,63.45198 63.341174,81 41.694594,81 20.048024,81 2.5,63.45198 2.5,41.80541 2.5,20.158827 20.048024,2.61081 41.694594,2.61081 c 21.64658,0 39.1946,17.548017 39.1946,39.1946 z"/>
    </svg>

【问题讨论】：

标签： css svg

【解决方案1】：

你看过这个吗？

https://maxwellito.github.io/vivus-instant/

您可以拖入任何 SVG，它自动具有有限的动画功能。

【讨论】：

对于那些不知道该怎么做的人来说，这是一个构建类似于我已经构建的东西的好工具。这不是我的问题的解决方案。

【解决方案2】：

您需要为stroke-dasharray 设置动画，而不仅仅是stroke-dashoffset。您可以将多个数字添加到 dasharray 的值中，定义短划线和间隙的交替长度。所以，如果你用r="40"圈起来，周长是251,4，

0 251.4是一个长度为0的笔画，整个圆周都有一个间隙
125.7 125.7是一个半圆的笔划和一个半圆的间隙
然后再次减小笔划长度

同时，通过动画偏移来围绕圆移动笔画的起点。

您可以对其他中间值进行大量微调，方法是以不同的方式分配 keyTimes 并使用缓动函数。这是线性动画的基本变体：

<svg width="84" height="84">
    <circle r="40" cx="42" cy="42" style="fill: none;stroke: black;stroke-width: 4;">
        <animate attributeName="stroke-dasharray" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0 251.4;125.7 125.7;0 251.4" />
        <animate attributeName="stroke-dashoffset" dur="3s" repeatCount="indefinite"
                 keyTimes="0;0.5;1" values="0;-100;-251.4" />
    </circle>
</svg>

【讨论】：

也许他们应该给你一个 SVG 学位——代表着认真非常好。很好的答案和完美的解释 - 谢谢。
在我的演示中，我使用了一个圆圈（又好又简单）。在现实生活中，徽标是一条看起来像语音标记的路径。我如何确定终点（251.4 是您给出的示例中的圆圈终点）？
对于带有id="myPath"、document.querySelector('#myPath').getTotalLength()的路径，这里需要JS，但只需要一次，在控制台执行。
当您知道如何操作时，这很容易。谢谢。

【解决方案3】：

Inkscape 使修改路径和保存路径变得容易。 svg 下面包括 from 和 to 路径。标签 animate 在 1 秒延迟后使眼睛闪烁两次然后停止：

<svg style="vertical-align:middle;opacity:0.7" 
  width="13" height="13" 
  viewBox="0 0 12 12" 
  xmlns="http://www.w3.org/2000/svg">
  <path id="glass_1" d="m6 3c2.58 0 4.23 2.07 4.84 3-.62.93-2.26 3-4.84 3s-4.23-2.07-4.84-3c.62-.93 2.26-3 4.84-3m0-1c-4 0-6 4-6 4s2 4 6 4 6-4 6-4-2-4-6-4zm0 2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z"
 fill="green">
</path>
    <animate xlink:href="#glass_1" attributeName="d" attributeType="XML" 
from="m6 3c2.58 0 4.23 2.07 4.84 3-.62.93-2.26 3-4.84 3s-4.23-2.07-4.84-3c.62-.93 2.26-3 4.84-3m0-1c-4 0-6 4-6 4s2 4 6 4 6-4 6-4-2-4-6-4zm0 2a2 2 0 1 0 2 2 2 2 0 0 0 -2-2z" 
to="m6.1 5.9c2.6 0 3-0.019 4.7 0.092-1.4 0.58-2.2 0.59-4.7 0.59s-3.8 0.0053-4.9-0.59c1.2-0.069 2.4-0.092 5-0.092m0-1c-4 0-6.1 1.1-6.1 1.1s2.1 1.6 6.1 1.6c4 0 5.9-1.6 5.9-1.6s-1.9-1.1-5.9-1.1zm-0.13-0.91c-1.8 0-2.7 2.2-1.4 3.4s3.4 0.37 3.4-1.4c0-1.1-0.9-2-2-2z" 
  begin="1s;op.end" 
  repeatCount="2" 
  dur="0.5s">
</animate>
</svg>

【讨论】：