XML SVG - persist the end state of an animation - svg

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
Here's an example in SVG
<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

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>

Related

animateTransform a group/object on hover (and return to initial state afterwards)

Is it possible to perform an animateTransform on a hover inside SVG?
I want the element to transform while the mouse is over it, and then return to its original position when the mouse has left.
I figure this is probably isn't possible. I have a mouseover to start the element, a mouseout to stop it, and set fill to remove to set its state back to the start.
But if the transform moves the object out from user the mouse cursor, the animation resets and starts moving again then moves out and resets and starts moving again ... flickering.
Here my simple example
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<g transform="translate(0 0)">
<rect x="10" y="10" width="20" height="40" fill="black" />
<animateTransform attributeName="transform" begin="mouseover" end="mouseout" dur="2s" type="translate" from="0 0" to="50 50" repeatCount="1" fill="remove" />
</g>
</svg>
Note: The svg is not being used on a HTML page - most solutions I have seen use "css" and "javascript", neither of which are available. I need to use SVG/SMIL only. If I were targetting html, I'd use css :hover.
You can use fill freeze on combination with restart whenNotActive. And then have an animation for both mouseover and mouseout.
I also removed the from attribute. The animation needs to start from the "freezed" point.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<g transform="translate(0 0)">
<rect x="10" y="10" width="20" height="40" fill="black" />
<animateTransform attributeName="transform" begin="mouseover"
dur="2s" type="translate" to="50 50" repeatCount="none"
fill="freeze" restart="whenNotActive" />
<animateTransform attributeName="transform" begin="mouseout"
dur="2s" type="translate" to="0 0" repeatCount="none"
fill="freeze" restart="whenNotActive" />
</g>
</svg>
One variant is to link the animation to an invisible, unmoving element on top of the moving one. For that, the begin and end event values are prefixed with the id of that cover element. Like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
<g transform="translate(0 0)">
<rect x="10" y="10" width="20" height="40" fill="black" />
<animateTransform attributeName="transform"
begin="cover.mouseover" end="cover.mouseout" dur="2s"
type="translate" from="0 0" to="50 50" repeatCount="1" fill="remove" />
</g>
<rect id="cover" x="10" y="10" width="20" height="40" opacity="0" />
</svg>

SVG Animation of <use> of <path> does not work in FireFox

I am making an animated snow-flakes pattern in SVG and it works nicely in Chrome/ium but in Firefox the pattern will only make the occasional tiny movement when you move the mouse in and out of the patterned area but otherwise doesn't move.
The underlying problem seems to be the same firefox bug as in this question where animating a <use> element doesn't work. My additional problem is that I am animating the position of a <path> element by changing its x and y position separately to avoid an obvious looping movement and since <path> elements don't have those attributes I need to reference them in a <use> element.
I'm hoping that I'm missing some completely obvious solution where the <path> gets embedded in some other element which has x and y attributes which I can animate and avoid the use of <use>.
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="150px">
<defs>
<!-- two identical snow-flake paths but slightly different scaling and rotation -->
<!-- could be two uses of the same path but the firefox animation bug is from use so that's probably not what we want -->
<path
id="snow-flake-1"
fill="#fff" stroke="none"
d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
transform="scale(0.02) rotate(-15) translate(-202 -202)">
</path>
<path id="snow-flake-2"
fill="#fff" stroke="none"
d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
transform="scale(0.027) rotate(15) translate(-202 -202)">
</path>
<!-- A couple of animated snow flakes. Animate x and y separately to avoid obvious cycles. -->
<!-- Pick dur values with large smallest common multiple to make a long cycle. -->
<pattern id="pt-snow-3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<use x="5" y="5" href="#snow-flake-1">
<animate attributeName="x" dur="4.2357s" repeatCount="indefinite" values="5; 5.7; 5; 3; 6.5; 5"/>
<animate attributeName="y" dur="3.9s" repeatCount="indefinite" values="5; 3; 5.7; 5; 6.5; 5"/>
</use>
<use x="15" y="15" href="#snow-flake-2">
<animate attributeName="x" dur="5.0s" repeatCount="indefinite" values="15; 13; 16.5; 15; 15.7; 15"/>
<animate attributeName="y" dur="3.7357s" repeatCount="indefinite" values="15; 13; 16.5; 15; 15.7; 15"/>
</use>
</pattern>
</defs>
<g>
<rect x="0" width="800" y="0" height="150" fill="#bbb"/>
<rect x="0" width="800" y="0" height="150" fill="url(#pt-snow-3)" stroke="#888"/>
</g>
</svg>
Based on comments by #PaulLeBeau and #RobertLongson I have made a version where there are two <animateTransform> tags attached to a <g> where the second one has addititve="sum". This <g> also contains the <path> to animate.
The two animations can have different durations to make for a long cycle and both can affect both x and y to make the illusion even more complete.
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="150px">
<defs>
<path
id="snow-flake"
fill=#fff stroke="none"
d="M183.3125,43.09375 L183.3125,83.8125 L152.71875,66.125 L137.1875,92.9375 L183.3125,119.65625 L183.3125,179.75 L131.5,149.8125 L131.40625,96.28125 L100.40625,96.34375 L100.46875,131.90625 L65.09375,111.46875 L49.59375,138.3125 L84.875,158.6875 L54.25,176.3125 L69.6875,203.1875 L115.90625,176.59375 L167.90625,206.625 L116.09375,236.53125 L69.6875,209.84375 L54.25,236.71875 L85.0625,254.46875 L49.6875,274.875 L65.1875,301.71875 L100.46875,281.34375 L100.40625,316.6875 L131.40625,316.75 L131.5,263.4375 L183.5,233.4375 L183.5,293.25 L137.1875,320.09375 L152.71875,346.90625 L183.5,329.09375 L183.5,369.9375 L214.5,369.9375 L214.5,329.21875 L245.09375,346.90625 L260.625,320.09375 L214.5,293.375 L214.5,233.28125 L266.3125,263.21875 L266.40625,316.75 L297.40625,316.6875 L297.34375,281.125 L332.71875,301.5625 L348.21875,274.71875 L312.9375,254.34375 L343.5625,236.71875 L328.125,209.84375 L281.9375,236.4375 L229.90625,206.40625 L281.75,176.46875 L328.125,203.1875 L343.5625,176.3125 L312.75,158.5625 L348.125,138.15625 L332.625,111.3125 L297.34375,131.6875 L297.40625,96.34375 L266.40625,96.28125 L266.3125,149.59375 L214.3125,179.59375 L214.3125,119.78125 L260.625,92.9375 L245.09375,66.125 L214.3125,83.9375 L214.3125,43.09375 L183.3125,43.09375 z"
transform="translate(-202 -202)">
</path>
<!-- A couple of animated snow flakes. Each has two animation loops to avoid obvious cycles. -->
<!-- Pick dur values with large smallest common multiple to make a long cycle. -->
<pattern id="pt-snow-3" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<g>
<use href="#snow-flake" transform="scale(0.02) rotate(-15)"/>
<animateTransform dur="5.000s" values="5,5; 5.7,4.7; 5.4,5; 3.7,5.2; 6.2,4.7; 5,5" attributeName="transform" type="translate" repeatCount="indefinite"/>
<animateTransform dur="4.789s" values="0,0; -1,3; -1,1; 0,-2; 2,-1; 0,0" additive="sum" attributeName="transform" type="translate" repeatCount="indefinite"/>
</g>
<g>
<use href="#snow-flake" transform="scale(0.027) rotate(15)"/>
<animateTransform dur="4.000s" values="15,14; 14.7,14; 15.2,14.1; 13,14; 15.5,14; 15,14" attributeName="transform" type="translate" repeatCount="indefinite"/>
<animateTransform dur="5.789s" values="0,0; 0,-2; -1,1; -1,1; 1,-1; 0,0" additive="sum" attributeName="transform" type="translate" repeatCount="indefinite"/>
</g>
</pattern>
</defs>
<g>
<rect x="0" width="500" y="0" height="150" fill="#bbb"/>
<rect x="0" width="500" y="0" height="150" fill="url(#pt-snow-3)" stroke="#888"/>
</g>
</svg>

svg mouseover doesn't work in zurb foundation nav topbar

I'm working with zurb foudation and have a roll over on an svg that is within the header. If the svg is under
then the roll over effect on the svg doesn't work. but if I remove either the section tag or the data-topbar attribute then it works fine. you can see an example of all three variations here:
http://firefields.com/foundation-5.5.0/icon-issue.html
and this is the svg code
<svg version="1.1" id="headTest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 42 42" enable-background="new 0 0 42 42" xml:space="preserve" >
<defs>
<mask id="Mask">
<path fill="#ffffff" d="M25.4,12.7L15.3,28.6c0.2,0.2,0.4,0.4,0.6,0.5c0.4,0.2,0.7,0.4,1.2,0.5L27,13.9c-0.3-0.4-0.6-0.7-0.8-0.8
C25.9,12.9,25.7,12.8,25.4,12.7z"/>
<path fill="#ffffff" d="M14.3,25.9c0.3-0.2,0.6-0.3,0.8-0.4l1.5-2.3c-1,0.1-2.1,0.4-3.3,0.9c-2.1,1.1-4.2,3-5.8,5.4
c-0.5,0.7-0.8,1.4-1.1,2.1c0.5,0.7,0.9,1.2,1.5,1.8c0.4-0.9,0.8-1.9,1.4-2.8C10.6,28.5,12.4,26.8,14.3,25.9z"/>
<path fill="#ffffff" d="M20.3,37.6c1.6-2.5,2.5-5.3,2.5-7.8c0-1.7-0.4-3.2-1-4.3l-1.2,2.1c0.2,0.7,0.4,1.4,0.3,2.2
c0,2.1-0.8,4.6-2.2,6.7c-0.5,0.7-1,1.4-1.5,2c-2.8-0.7-5.3-1.9-7.6-3.6C9.2,35.6,9.1,36.3,9,37c2.6,2,5.6,3.2,8.8,3.7
c0.6-0.6,1.1-1.1,1.6-1.8l0,0c0,0,0,0,0.1,0C19.7,38.5,20,38.1,20.3,37.6z"/>
<path fill="#ffffff" d="M38.7,12c-0.8-1.7-2-3.3-3.3-4.6c-0.1,0.7-0.4,1.5-0.7,2.2c0,0,0,0.1,0.1,0.1l-0.1-0.1c-0.4,1-0.8,2-1.5,3
c-1.4,2.1-3.2,3.8-5,4.8c-0.7,0.3-1.3,0.6-1.9,0.7l-1.2,2.1c1.3,0.1,2.7-0.3,4.1-0.9c2.1-1.1,4.2-3.1,5.8-5.5
c0.5-0.7,0.8-1.4,1.1-2.1c0.3,0.5,0.6,0.8,0.7,1.3c4.5,8.9,0.9,19.7-7.9,24.2c-2.4,1.2-4.9,1.9-7.5,1.9c-0.5,0.7-0.9,1.4-1.5,2
c3.3,0.2,6.7-0.6,9.9-2.1C39.9,33.9,43.8,21.8,38.7,12z"/>
<path fill="#ffffff" d="M12.9,5c2.9-1.5,6-2.1,9.1-1.9c0.6-0.7,1.1-1.3,1.7-1.9c-3.8-0.5-7.8,0.1-11.6,2c-9.9,4.9-13.9,17-8.9,26.8
c1,2.1,2.4,3.9,4.1,5.5c0.1-0.7,0.4-1.5,0.7-2.1c-1.1-1.2-2.1-2.6-3-4.2C0.5,20.3,4,9.5,12.9,5z"/>
<path fill="#ffffff" d="M22.4,5.6c-1.6,2.5-2.5,5.3-2.5,7.8c0,1.4,0.2,2.6,0.7,3.5l1.4-2.2c-0.1-0.4-0.1-0.8-0.1-1.3
c0-2.1,0.8-4.6,2.2-6.7c0.7-1.1,1.4-2.1,2.1-2.8c2.6,0.8,5,2.1,7.1,4.1c0.3-0.8,0.5-1.6,0.5-2.2c-2.3-2-5-3.3-7.9-4
c-0.7,0.5-1.2,1-1.8,1.7c0.3,0.1,0.2,0-0.1,0C23.4,4,22.9,4.8,22.4,5.6z"/>
</mask>
</defs>
<g mask="url(#Mask)">
<circle fill="#222222" class="icon-background-circle" cx="21" cy="21" r="21"/>
<circle fill="#73e8eb" class="icon-foreground-circle" cx="21" cy="21" r="0">
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseover" to="21" dur="0.15s" fill="freeze" />
<animate attributeType="xml" attributeName="r" begin="hoverZone.mouseout" to="0" dur="0.15s" fill="freeze" />
</circle>
</g>
<rect id="hoverZone" x="0" y="0" width="42" height="42" fill-opacity="0" />
</svg>
hope you can help.
It has nothing to do with the <section> element.
When an an SVG is embedded via the <img> element, animations are allowed, but interaction (such as mouse events) are not. This is for privacy reasons.
Use <object> or <embed> instead.

SVG animateTransform rotate and scale the same object at the same time?

I'd like to animate scaling and rotating an object at the same time.. so far my attempts failed. I can only chain the animation (rotate, then scale) but not rotate and scale together.
What did I miss?
I have tried to remove "additive="sum" but that just overwrites and ignored the scale animation...
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect x="29.2" y="33.6" width="136.7" height="136.7">
<animateTransform attributeName="transform" type="scale"
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/>
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="100 100 100" dur="5s" repeatCount="indefinite" accumulate="sum" />
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="4s" fill="freeze" />
</rect>
</svg>
I appreciate all the help!
You just need additive="sum" on both the animate elements. It works fine for me on Firefox with that one change.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<rect x="29.2" y="33.6" width="136.7" height="136.7">
<animateTransform attributeName="transform" type="scale"
from="0" to="1" dur="1s" additive="sum" accumulate="sum"/>
<animateTransform attributeName="transform" type="rotate"
from="0 100 100" to="100 100 100" dur="5s" repeatCount="indefinite" additive="sum" accumulate="sum" />
<animate attributeType="CSS" attributeName="opacity"
from="1" to="0" dur="4s" fill="freeze" />
</rect>
</svg>

reference element in a animate element and the element and animate element are in a defs to be reflected in use element

I am researching svg animation and was wonder if it possible to use the href attribute in the animate element which the target of the href and the animate element it self are in a defs... here is a code working example:
<svg viewBox="0 0 400 100">
<defs>
<rect id="anim-rect"
x="-25" y="-25"
width="50" height="50"
fill="#29e" >
<animate
attributeName="fill"
values="#29e; #4e4; #f40; #29e"
dur="6s"
repeatCount="indefinite" />
</rect>
</defs>
<use xlink:href="#anim-rect" transform="translate(100 50)"/>
<use xlink:href="#anim-rect" transform="translate(200 50)"/>
<use xlink:href="#anim-rect" transform="translate(300 50)"/>
</svg>
And here what I want to do:
<svg viewBox="0 0 400 100">
<defs>
<rect id="anim-rect"
x="-25" y="-25"
width="50" height="50"
fill="#29e" >
</rect>
<animate xlink:href="#anim-rect"
attributeName="fill"
values="#29e; #4e4; #f40; #29e"
dur="6s"
repeatCount="indefinite" />
</defs>
<use xlink:href="#anim-rect" transform="translate(100 50)"/>
<use xlink:href="#anim-rect" transform="translate(200 50)"/>
<use xlink:href="#anim-rect" transform="translate(300 50)"/>
</svg>
Any help would be appreciated.

Resources