CSS / SVG笔触动画

Question

我有这个圆圈，单击h1时会显示动画。

一切正常，除了我希望动画从下到右开始：

不是从右中。

http://jsfiddle.net/zj7w81ss/

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="80px" height="80px" viewBox="0 0 16 16" preserveAspectRatio="none">
<circle cx="8" cy="8" r="6.215"></circle>
</svg>

我应该怎么做？

谢谢！

Answer 1

您可以使用transform属性旋转圆：

transform="rotate(degrees centerX centerY)"

<circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>

要更改线条动画的方向，您可以将CSS中的初始stroke-dashoffset更改为stroke-dashoffset: -39;

编辑： 在你的小提琴上测试