使圆周路径从顶部开始

Question

为了满足我的需要，我已经到达了很近的地方。只是一个小问题，我试着玩计算，但被困在其中。片段：

​

.path {
  stroke-dasharray: 120;
  stroke-dashoffset: -120;
  animation: dash 3s linear infinite;
}

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

<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"/>
<path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120.2,2.7c-14.1,0-25.6,11.5-25.6,25.6c0,14.1,11.5,25.6,25.6,25.6c14.1,0,25.6-11.5,25.6-25.6,25.6c14.1,0,25.6-11.5,25.6-25.6
	"/>

</svg>

​

我只需要小的帮助使圆圈路径动画从顶部的开始。我想我的计算做错了。我只需要像这这样的动画。然而，它是使用第三方js插件，我不想使用。

另外，我们是否可以将css嵌入到SVG中，这样我们就可以使用带有动画的.svg图形来将svg代码放入html文件中？

Answer 1

如果您需要从圆圈的顶部开始的笔划，您需要更改用于创建圆圈的路径。我根据这个答案中描述的公式又做了一个。我只是修改了它，使路径从顶部开始。

然后，您可以为stroke-dasharray和stroke-dashoffset值计算圆的周长(stroke-dashoffset)：

​

.path {
  stroke-dasharray: 157;
  stroke-dashoffset: -157;
  animation: dash 6s linear infinite;
}

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

<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"/>
  <path class="path" stroke="#232527" stroke-width="5" fill="#fff" d="M120 28.3 m0 -25 a25 25 0 1 0 0 50 a25 25 0 1 0 0 -50" />
</svg>

​