corysimmons
corysimmons

Reputation: 7675

SMIL Animate SVG "to" value

I'm trying to animate this SVG rect to end on width 100 but for some reason it keeps resetting to the original value. Help!

http://codepen.io/corysimmons/pen/RNmNQE

<svg>
  <rect height="100" width="10">
    <animate attributeName="width" values="10;100" dur="3s" />
  </rect>
</svg>

Upvotes: 0

Views: 143

Answers (1)

airnan
airnan

Reputation: 635

use the attribute fill="freeze"

<svg>
  <rect height="100" width="10">
    <animate fill="freeze" attributeName="width" from="10" to="100" dur="3s" />
  </rect>
</svg>

Upvotes: 1

Related Questions