SVG 动画起始位置

Question

我有一个我一直在玩的小 SVG 动画，我想知道是否有针对以下问题的简单解决方案。

有没有办法改变圆的起点？因为它似乎总是从右手 3 点钟位置开始并顺时针旋转。理想情况下，我希望它在线条完成动画的时间和地点开始。示例：http://jsfiddle.net/matta70/7jvd6fsx/1/

 .line {
    stroke-dasharray: 650;
    stroke-dashoffset: 650;
    animation: offset 3s linear forwards;
 }
 .circle {
    stroke-dasharray: 230;
    stroke-dashoffset: 230;
    animation: offset 3s linear forwards;

 }


 /*========================
 *      KEYFRAMES
 */

 @keyframes offset {
    100% {
        stroke-dashoffset: 0;

    }
 }


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px"
     height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
    <g id="Layer_1">
        <line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37"/>
        <circle class="circle" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36"/>
        <circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18"/>
    </g>
</svg>

Answer 1

你需要使用

transform="rotate(<angle>)"

这里是工作代码

<style>
 .line {
     stroke-dasharray: 650;
     stroke-dashoffset: 650;
     animation: offset 3s linear forwards;
 }
 .circle {
     stroke-dasharray: 230;
     stroke-dashoffset: 230;
     animation: offset 1s linear forwards 2.3s;
 }
 /*========================
     *      KEYFRAMES
     */
 @keyframes offset {
     100% {
         stroke-dashoffset: 0;
     }
 }
</style>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px" height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
<g id="Layer_1">
    <line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37" />
    <circle class="circle" transform="rotate(180 540 37)"  fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36" />
    <circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18" />
</g>

你可以找到解释得很好的教程here

Here 有一个 Jsfiddle 很久以前从某处复制过来的。（上图）

希望对您有所帮助

Answer 2

您可以使用 transform:rotate(180 ...) 旋转圆圈，并使用 animation-delay 延迟圆圈动画。

http://jsfiddle.net/6sp2fv2q/

SVG 动画起始位置

SVG animation start position

svg

svg-animate