Search code examples
svgsvg-animate

SVG animation start position

i have a small SVG animation that i have been playing around with and i was wondering if there is a simple solution for the following issue.

Is there a way of changing the start point of where the circle starts? As it always seems to start on the right hand 3 o'clock position and goes around clockwise. Ideally i want it to start where and when the line finishes animating. Example: 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>
Solution

  • You need to use

    transform="rotate(<angle>)"

    here a working code

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

    You can find a well explained tutorial here

    Here there is a Jsfiddle copied from somewhere, time ago. (hove image)

    Hope this help