SVG 动画问题。没有达到预期答案

【问题标题】：SVG animation issue. Not getting as desiredSVG 动画问题。没有达到预期
【发布时间】：2016-09-21 17:53:38
【问题描述】：

我需要一点帮助来适应这个动画：http://codepen.io/tutsplus/pen/ByRzOV

在 M 和 T 之间：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 376 56.6" enable-background="new 0 0 376 56.6" xml:space="preserve">
<path fill="#232527" d="M345.8,53.3C345.8,53.3,345.8,53.3,345.8,53.3c-1.1,0-2.2-0.7-2.7-1.7l-21.7-44c-0.7-1.5-0.1-3.3,1.4-4
	c1.5-0.7,3.3-0.1,4,1.4l19,38.6l19.2-38.6c0.7-1.5,2.5-2.1,4-1.3c1.5,0.7,2.1,2.5,1.3,4l-21.9,44C348,52.6,347,53.3,345.8,53.3z
	 M274.5,53.3c-1.7,0-3-1.3-3-3v-44c0-1.7,1.3-3,3-3s3,1.3,3,3v44C277.5,51.9,276.1,53.3,274.5,53.3z M205,53.3c-1.7,0-3-1.3-3-3v-41
	h-19c-1.7,0-3-1.3-3-3s1.3-3,3-3h44c1.7,0,3,1.3,3,3s-1.3,3-3,3h-19v41C208,51.9,206.7,53.3,205,53.3z M30.5,53.2
	C30.5,53.2,30.5,53.2,30.5,53.2c-1.1,0-2.2-0.7-2.7-1.7l-16-32.5v31.1c0,1.7-1.3,3-3,3s-3-1.3-3-3v-44c0-1.4,1-2.6,2.3-2.9
	C9.6,3,11,3.6,11.6,4.9l19,38.6L49.8,4.9c0.6-1.2,2-1.9,3.4-1.6c1.4,0.3,2.3,1.5,2.3,2.9v44c0,1.7-1.3,3-3,3s-3-1.3-3-3V18.9
	L33.2,51.6C32.7,52.6,31.7,53.2,30.5,53.2z"/>
</svg>

我尝试过很多次，但没有成功。请帮忙。或者有没有其他方法可以在 SVG 中使用这种类型的圆形动画。我也尝试创建但没有工作。还有没有css和js也可以吗？

提前谢谢你。真的很感激。

亲切的问候

【问题讨论】：

为 stroke-dasharray 设置动画。这个网站上有很多关于这个的问题和答案。
已经尝试了所有..stroke-dasharray 可以与 css/js 一起使用......我们可以不这样做吗？
也许，你想怎么做？
我想添加来生成弧线并像我显示的链接一样设置动画。也尝试使用组路径，但没有成功。有没有其他方法可以从我显示的链接中获取 SVG 并将其放在 M 和 T 之间？

标签： html xml animation svg path

【解决方案1】：

这是 CSS 动画的一种方式：https://jsfiddle.net/3o9msftL/1/，虽然它没有完全一样的缓动，而且似乎比 GreenSock JS 动画（我还没有深入研究过）更占用 CPU。

基本上我添加了一个看起来像这样的圆圈：

<circle cx="120" cy="29" r="23" 
        stroke-width="6" stroke="#000" fill="none" 
        style="animation: dash 5s infinite; 
               animation-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955); 
               transform: rotate(-90deg) /* else it starts on the right side */; 
               transform-origin: 120px 29px"
        stroke-dasharray="150, 150" stroke-linecap="round"/>

那些尺寸，因为它们似乎适合您的 SVG 的其余部分，我相信 150,150 的值，因为它大约是 2πr（即周长）。然后在 CSS 中，我添加了以下 CSS：

@keyframes dash {
  to {
    stroke-dashoffset: -300;
  }
}

300 是破折号数组的总和（或者它是笔划的两倍？），顺时针方向为负数。

【讨论】：