CSS/SVG 描边动画

【问题标题】：CSS/SVG stroke animationCSS/SVG 描边动画
【发布时间】：2014-12-04 02:37:10
【问题描述】：

我有这个圈子，点击h1会动起来。

一切正常，只是我希望动画从下到右开始，例如：

不是从右中间。

    <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>

我应该怎么做？

谢谢！

【问题讨论】：

标签： javascript jquery css svg path

【解决方案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

【讨论】：