Animate SVG with animateTransform - svg

Trying to animate an SVG element with the skewX. It works, however, not exactly the way I want it to.
Now: the bottom part moves to the left
Goal: the upper part should move to the right instead (and bottom stays in place)
I tried with transform-origin but it didn't work. Any ideas how to solve this mystery?
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102">
<g>
<rect width="10%" height="50%"
style="fill:none; stroke:red; stroke-with:3;">
<animateTransform
attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
id="fallen"/>
</rect>
</g>
</svg>


Use another transform to move the whole thing to the right at the same time as the bottom moves left.
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="102" viewBox="-50 -50 102 102">
<g>
<rect width="10%" height="50%"
style="fill:none; stroke:red; stroke-with:3;">
<animateTransform
attributeName="transform"
attributeType="XML"
type="skewX"
from="0"
to="-20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
id="fallen"/>
<animateTransform
attributeName="transform"
attributeType="XML"
type="translate"
from="0"
to="20"
begin="0.5s"
dur="0.2s"
repeatCount="1"
fill="freeze"
additive="sum"/>
</rect>
</g>
</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 animateTransform toggle only working once

If you click two subsequent times on the rectangle, you see an animation toggling on and off:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.01s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
</text>
</svg>
I want that to work as many times as you may want, but it only works once; afterwards the rotation start point for the first click is for some reason shifted by -90 deg, as you'll notice from upon the 3rd click. Any ideas?
UPDATE
I noticed the following, if that may help to solve the problem (still unable to solve it): Try out the following with the snippet above:
A) Click on the rectangle once
B) Click on the rectangle again, to get the label back to its original position
C) Before clicking on the rectangle for the third time, copy the four animateTransform tags inside the text tag into a js variable let's say yourSavedAnimateTransformString, then delete them from the markup, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML =
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[0].outerHTML +
document.getElementsByClassName("timeline-project-label")[0]
.childNodes[1].outerHTML;
, then reinsert them at the exact same place with js, e.g. via
document.getElementsByClassName("timeline-project-label")[0].innerHTML +=
yourSavedAnimateTransformString
Then, click on the rectangle a third and a fourth time, and you'll see that it will work for the third and fourth time without refreshing the page, but fail again for subsequent clicks, unless you repeat this delete-re-insert procedure on every 2nd click on the rectangle, which is a rather hacky not-solution to me.
I supposed that this info may be useful to solve my problem, as it indicates that my problem's somehow related to an unaccessible tracked state of the present animateTransform tags, which can be eliminated by renewing these tags on every 2nd click.
As this is not a real solution, I'd still really like to understand what's going on here..?
UPDATE 2
How come that the snippet above actually does not ainmate the transforms AT ALL in Safari?? According to the specs, animateTransform is supported for all except IE... (for which I'll use Fakesmile when done..)?
I've only noticed it now; you may check my problem in FF and Chrome, where the snippet behaves as described.
Doing it programmatically via document.getElementById("activate_project_10").beginElement() does actually work, but is this really necessary? Which is the standard approach for svg animatransforms in safari?

Okay, found a solution which works in FF and Chrome. The principal thought was to overwrite, after finishing the last animation of inactivate_project_10 animation, the state of the transform property with the initial value, before triggering the first one of the activate_project_10 animation. All this while thus using replace instead of sum as the value of additive for the last resetting animation, while using accumulate=sum to assure that the accumulated (thus actually the resetted) value is taken for the reset.
And this actually worked:
<svg version="1.1" baseProfile="full" viewBox="0 0 1000 200" xmlns="http://www.w3.org/2000/svg" id="timeline-container">
<rect id="project-10-activator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="block">
<animateTransform id="activate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="inactivate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="activate_project_10.end" fill="freeze"></set>
</rect>
<rect id="project-10-inactivator" class="" stroke="black" stroke-width="2" fill="white" width="20" height="20" x="11" y="142.2" transform="translate(-10,-10)" data-project-id="10" display="none">
<animateTransform id="inactivate_project_10" begin="click" fill="freeze" dur="0.5s"></animateTransform>
<set attributeName="display" to="block" begin="activate_project_10.end" fill="freeze"></set>
<set attributeName="display" to="none" begin="inactivate_project_10.end" fill="freeze"></set>
</rect>
<text data-project-id="10" x="17" y="121.2" transform="rotate(-90,17,121.2)" class="timeline-project-label label-above-project-point">
<tspan>Upper Title</tspan>
<tspan class="project-name-span" x="17" dy="15">lower title</tspan>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 16.609375 139.7156219482422" to="90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="activate_project_10.begin" from="0 0" to="-33.140625 -10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 0" to="33.140625 10" additive="sum" fill="freeze"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="0.5s" repeatCount="1" begin="inactivate_project_10.begin" from="0 16.609375 139.7156219482422" to="-90 16.609375 139.7156219482422" additive="sum" fill="freeze">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" repeatCount="1" dur="0.01s" from="-90 17 121.2" to="-90 17 121.2" fill="freeze" additive="replace" accumulate="sum" begin="inactivate_project_10.end"></animateTransform>
</text>
</svg>
The main modifications were:
changed the dur in the two main animateTransforms (inactivate_project_10 and activate_project_10) to the same time as the combined translation + rotation animations of 0.5s.
added the last animateTransform tag to reset the transform state to the initial state to be able to toggle the animation in an endless loop of clicking. Use a particularly short duration (0.01s used) to reset as fast as possible when finishing a toggle cycle, to quickly be ready for the next one, if triggered again.
Yet, I'd still like to know why this is not working AT ALL in Safari..? Even if you use beginElement(), that only works for the first two toggles, and then stops working..

Can i create a circle that follow an existing line in svg?

As the title suggests, i'm trying to create an animation in svg with a point/circle that follows an irregular path. I am using the animateTransform, for example:
<animateTransform attributeName="transform"
attributeType="XML"
type="translate"
from="0 60 70"
to="360 60 70"
dur="10s"
repeatCount="definite"/>
Can i implement this method (in svg) to let the circle to follow the path, or i have to use necessarily javascript?
If i can do it in svg could you give me a basic example with an explanation?

You can use the <animateMotion> element.
Example adapted from MDN:
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<path id="path" fill="none" stroke="lightgrey"
d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
<circle r="5" fill="red">
<animateMotion dur="10s" repeatCount="indefinite">
<mpath xlink:href="#path"/>
</animateMotion>
</circle>
</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>

XML SVG - persist the end state of an animation

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>

Resources