CODEWITHSUNDEEP
htmlsvg
user2799820
user2799820

Reputation: 51

Making SVG transformation not reset

When I use animateTransform the element goes back to the starting position/state when the animation is done. Is it possible to have it stay in the ending position

Example fiddle http://jsfiddle.net/RwL8U/

<svg width="500" height="500" viewBox="0 0 500 500">
    <circle cx="250" cy="250" r="100" fill= "black"/>
    <g>
        <line x1="250" y1="250" x2="250" y2="150" stroke-width="2" stroke="white"/>                     

         <animateTransform
          attributeType="XML"
          attributeName="transform"
          type="rotate"
          from="0,250,250" to="180,250,250"
          begin="0s" dur="4s"
          repeatCount="0"/>
    </g>
</svg>

Upvotes: 1

Views: 213

Answers (1)

Sirko
Sirko

Reputation: 74086

Add a fill="freeze" to the <animateTransform> element. This will "freeze" the final value of the animation after the animation has completed. More info can be found in the SVG documentation on animations §19.2.8

<svg width="500" height="500" viewBox="0 0 500 500">
    <circle cx="250" cy="250" r="100" fill= "black"/>
    <g>
        <line x1="250" y1="250" x2="250" y2="150" stroke-width="2" stroke="white"/>                     
        <animateTransform
         attributeType="XML"
         attributeName="transform"
         type="rotate"
         from="0,250,250" to="180,250,250"
         begin="0s" dur="4s"
         repeatCount="0"
         fill="freeze" />
    </g>
</svg>

Fiddle

Upvotes: 1

Related Questions