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;

修改：tested on your fiddle