Menu
After the end of an AnimateTransform action, the element snaps back to the original value.
This isn't exactly unexpected as it's in the SMIL documentation:
As with all animation elements, this only manipulates the presentation value, and when the animation completes, the effect is no longer applied
But it is unwanted. I'd like to find a way to persist the changes using XML animations
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1" />
</rect>
</svg>One idea I had was to call a set action with dur="indefinite" that was triggered by the end of the first animation with begin="one.end", but can't quite seem to get the syntax right. I haven't found any documentation that show how to call set for a transformed value.
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1" />
<!-- Doesn't work -->
<set attributeType="XML"
attributeName="transform"
type="translate"
to="-7" begin="one.end" />
<!-- Does work (as POC) -->
<set attributeType="css"
attributeName="fill"
to="green" begin="one.end" />
</rect>
</svg>This question on persisting the end state of the animation shows how to do this with css transforms by using -webkit-animation-fill-mode: forwards;, but that obviously won't have any affect on an svg animation
437
SVG supports the ability to change vector graphics over time, to create animated effects. SVG content can be animated in the following ways: Using SVG's animation elements [svg-animation]. SVG document fragments can describe time-based modifications to the document's elements.
The <animate> SVG element is used to animate an attribute or property of an element over time. It's normally inserted inside the element which we want to animate. Attributes: Animation Attributes: Attributes used to give animation effects, exp timing attributes, event attributes, and value attributes, etc.
The endEvent event of the SVGAnimationElement interface is fired when at the active end of the animation is reached. Note: This event is not raised at the simple end of each animation repeat.
SVG defines the graphics in XML format Every element and every attribute in SVG files can be animated SVG is a W3C recommendation SVG integrates with other W3C standards such as the DOM and XSL
Animation elements are used to animate the SVG graphics. The animation elements were initially defined in the Synchronized Multimedia Integration Language (SMIL). In animation, you have to specify the starting and ending values of the attribute, motion, color, animation beginning time and the duration of the animation.
You can use -webkit-animation-fill-mode to persist the end state (or even extend the start state backwards). It was added to WebKit a while ago, and shipped in iOS 4 and Safari 5.
fill="freeze" will persist the state of an animation e.g.
<svg width="200" height="200" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="outline" stroke="black" fill="white"
width="100" height="100" >
<animateTransform id="one"
attributeType="XML"
attributeName="transform"
type="translate"
from="0" to="-7"
dur="1s" repeatCount="1"
fill="freeze"/>
</rect>
</svg>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
