I am working on a svg animation in which the animation has to trace the path which i defined previously,but the intial position of the animation when its starts seems to get displaced to another place but it still traces the same path but on different co-ordinates.
I want to the animation to follow along the path which is defined.
<svg width="500" height="500" viewBox="0 0 1000 1000">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10" d="M0,342.8c0,0,138.4-1.5,221.8-50.1c0,0,150.2-87.8,344.6-28.3c16.5,5.1,31.7,9.7,45.5,13.9"/>
<path id="motion" fill="none" stroke="#000000" stroke-miterlimit="10" class="st0" d="M0,379.8c0,0,154.4-114.9,223.4-71.6s381.4,29.7,388.6-24.3"/>
<g id="car" transform="translate(0, 0)">
<path id="note" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5
c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z"/>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</g>
<g id="car1" transform="translate(0, 0)">
<path id="note" d="M248.8,306.8c0,0-24-7-28.5,11c0,0-3,16,21,16.5c0,0,19.5,2.3,18.5-28.8s0-61.2,0-61.2s42,9,19,31.5
c0,0,17-1,13.5-23c0,0-7.5-20-43-22L248.8,306.8z"/>
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite" />
</g>
<animateMotion
xlink:href="#car1"
dur="3s"
begin="click"
fill="freeze"
repeatCount="indefinite"
>
<mpath xlink:href="#motion" />
</animateMotion>
<animateMotion
xlink:href="#car"
dur="3s"
begin="click"
fill="freeze"
repeatCount="indefinite"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
Related
I have a repeating 20-second svg animation. Halfway (10 seconds) it should abruptly hide one path-element called leftside. When the animation finishes and repeats, it should show the element again. How can I achieve this?
Right now, I got the first loop working. But the reset when the animation repeats isn't working unfortunately.
This is what I have:
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<animateMotion id="movement"
xlink:href="#vehicle"
dur="20s"
begin="0;movement.end+4s"
fill="freeze"
keyPoints="0;1;0"
keyTimes="0;0.5;1"
calcMode="spline"
keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="10s;movement.begin+10s;" repeatCount="indefinitive" fill="freeze" />
<animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" repeatCount="indefinitive" fill="freeze" />
</svg>
Mybe so?
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle" stroke-width="2" stroke="red">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<!-- Two dash move forward 10s -->
<animateMotion id="movement_forward"
xlink:href="#vehicle"
dur="10s"
begin="0;movement_back.end"
keyPoints="0;1"
keyTimes="0;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<!-- One dash goes back 10 seconds -->
<animateMotion id="movement_back"
xlink:href="#rightside"
dur="10s"
begin="movement_forward.end"
keyPoints="1;0"
keyTimes="0;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
begin="0;movement_back.end" - the restart of the first animation starts after the end of the second animation
begin="movement_forward.end - thus, two animations loop. When the first animation ends, the second animation begins
For uneven movement on different sections of the path, you need to change the attribute values:
keyPoints="0;0.2;0.4;0.8;1"
keyTimes="0;0.495;0.6;0.75;1"
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle" stroke-width="2" stroke="red">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<!-- Two dash move forward 10s -->
<animateMotion id="movement_forward"
xlink:href="#vehicle"
dur="10s"
begin="0;movement_back.end"
keyPoints="0;0.2;0.4;0.8;1"
keyTimes="0;0.495;0.6;0.75;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<!-- One dash goes back 10 seconds -->
<animateMotion id="movement_back"
xlink:href="#rightside"
dur="10s"
begin="movement_forward.end"
keyPoints="1;0.8;0.4;0.2;0"
keyTimes="0;0.495;0.6;0.75;1"
calcMode="linear"
>
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>
This is hard to follow for me, but I got this solution:
<svg class="svg-object" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1923 643" preserveAspectRatio="xMinYMin meet">
<path id="motionPath" fill="none" stroke="#000000" stroke-miterlimit="10"
d="M1438.8,348.8c6.2,189.4-75.3,34.5-157.8,28.3c-515.1,38.8-757.8,54.5-849.3,72.8
c-17.9,10.9-13.4,91.9-14.9,155.8"
/>
<g id="vehicle">
<path id="rightside" d="M13,2c-0.6,0-1-0.4-1-1s0.4-1,1-1s8,0.4,8,1S13.6,2,13,2z"/>
<path id="leftside" d="M8,2C7.4,2,0,1.6,0,1s7.4-1,8-1s1,0.4,1,1S8.6,2,8,2z"/>
</g>
<animateMotion id="movement"
xlink:href="#vehicle"
dur="20s"
begin="0;movement.end+4s"
fill="freeze"
keyPoints="0;1;0"
keyTimes="0;0.5;1"
calcMode="spline"
keySplines= ".6 .01 .2 1; 0.6 .01 .2 1";
>
<mpath xlink:href="#motionPath" />
</animateMotion>
<animate xlink:href="#leftside" attributeName="opacity" from="1" to="0" dur="0.01s" begin="movement.begin+10s; 20s" fill="freeze" />
<animate xlink:href="#leftside" attributeName="opacity" from="0" to="1" dur="0.01s" begin="movement.begin" fill="freeze" />
</svg>
A couple of points:
If you want to repeat the animation, the keyword is indefinite, not indefinitive.
You apparently wanted to set the leftside animation to indefinite. This would apply to the opacity animation itself, with a 0.01s duration. This means that, after being triggered, the animation would be repeating itself every 0.01s in a blinking pattern.
I believe the issue here is related to the interplay between both leftside animations, and which one has the preference at each time. However, it looks like a complex issue, and I do not understand it fully (explained here).
First of all, please look into below snippet, you will see the repeated animations which five balls move along one path.
But unfortunately, you will find the first ball will stop at m0,0 in a few minutes, later, the following balls stop one by one.
Even I ajdusted dur="0.4s" to dur="0.39s", it still had same issue. (I thought it was caused by the bound value of dur).
Updated:
I found the SVG seemed working fine (at least ran 5 hours) in Firefox (latest version).
Google Chrome (latest version) will have the above issue mentioned.
It seems Chrome can't support SVG animation very well.
Updated 2:
For Chrome, it seems only <animateMotion> has the issue, because I ran this SVG with only <animate>, there is not any issue so far (at least two hours).
Thanks.
svg{
width:50%;
height:50%;
}
<svg fill="#435063" viewBox="0 0 64 64">
<g>
<path d="m-40,0 q-8, -7, 0, -15 l40, 0 l0,15"
stroke="#529fd9" stroke-width="1" fill="none" id="route1"></path>
<path d="m0,0 l-40, 0" stroke="#529fd9" stroke-width="1" fill="none" id="route2"></path>
<ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
<animateMotion id="a1" dur="1.6s" begin="0s;a1.end+0.4s">
<mpath xlink:href="#route2"></mpath>
</animateMotion>
<animateMotion dur="0.39s" begin="a1.end">
<mpath xlink:href="#route1"></mpath>
</animateMotion>
<animate
attributeName="ry"
values="3;2;2;2;3"
begin="a1.end+0.05s" dur="0.32s"
/>
<animate
attributeName="rx"
values="3;5;5;5;3"
begin="a1.end+0.05s" dur="0.32s"
/>
</ellipse>
<ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
<animateMotion id="b1" dur="1.6s" begin="0.4s;b1.end+0.4s">
<mpath xlink:href="#route2"></mpath>
</animateMotion>
<animateMotion dur="0.39s" begin="b1.end">
<mpath xlink:href="#route1"></mpath>
</animateMotion>
<animate
attributeName="ry"
values="3;2;2;2;3"
begin="b1.end+0.05s" dur="0.32s"
/>
<animate
attributeName="rx"
values="3;5;5;5;3"
begin="b1.end+0.05s" dur="0.32s"
/>
</ellipse>
<ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
<animateMotion id="c1" dur="1.6s" begin="0.8s;c1.end+0.4s">
<mpath xlink:href="#route2"></mpath>
</animateMotion>
<animateMotion dur="0.39s" begin="c1.end">
<mpath xlink:href="#route1"></mpath>
</animateMotion>
<animate
attributeName="ry"
values="3;2;2;2;3"
begin="c1.end+0.05s" dur="0.32s"
/>
<animate
attributeName="rx"
values="3;5;5;5;3"
begin="c1.end+0.05s" dur="0.32s"
/>
</ellipse>
<ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
<animateMotion id="d1" dur="1.6s" begin="1.2s;d1.end+0.4s">
<mpath xlink:href="#route2"></mpath>
</animateMotion>
<animateMotion dur="0.39s" begin="d1.end">
<mpath xlink:href="#route1"></mpath>
</animateMotion>
<animate
attributeName="ry"
values="3;2;2;2;3"
begin="d1.end+0.05s" dur="0.32s"
/>
<animate
attributeName="rx"
values="3;5;5;5;3"
begin="d1.end+0.05s" dur="0.32s"
/>
</ellipse>
<ellipse cx="53" cy="32" rx="3" ry="3" stroke-width="1">
<animateMotion id="e1" dur="1.6s" begin="1.6s;e1.end+0.4s">
<mpath xlink:href="#route2"></mpath>
</animateMotion>
<animateMotion dur="0.39s" begin="e1.end">
<mpath xlink:href="#route1"></mpath>
</animateMotion>
<animate
attributeName="ry"
values="3;2;2;2;3"
begin="e1.end+0.05s" dur="0.32s"
/>
<animate
attributeName="rx"
values="3;5;5;5;3"
begin="e1.end+0.05s" dur="0.32s"
/>
</ellipse>
</g>
</svg>
Below screenshot show two of balls already stop.
This was one bug for Chrome (version <= M77). Now it already been fixed since >=M78 (As the Chrome project member mentioned).
So upgrade the chrome to latest version then works well.
I am trying to animate an arrow from left to right.The code of my arrow's path is given below:
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<g transform = "translate(0,0)">
<path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1">
<animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>
</path>
</g>
</svg>
The above is the svg path content of my arrow.
Kindly anyone help me how to fill the path from left to right. Waiting for quick response
You can do this by just animating the <stop>s in a <linear gradient>.
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>
How this works is that we have a linear gradient representing an abrupt change from green to white. The <animation> elements move the position, of that abrupt change, from the left of the arrow (offset=0) to the right (offset="1").
Note that SVG <animate> elements will not work in IE. If you need to support IE, you will need to use the FakeSmile library or use a different method (such as a JS animation library).
Building upon andreas' answer. You can cover your arrow with a shape that is animated to uncover it.
<svg id="svg_circle" width="450" height="400" viewBox='0 0 450 400'>
<path class="path" stroke="#F0F0F0" fill="#fff"
stroke-width="1" opacity="1" id="svg_1"
d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,
-13.57138l34.2665,-0.47295l-0.0208,-7.14282
l14.50618,14.42226l-14.95643,15.04345l-0.20382,
-8.74944z">
<animate id="project_anim1" attributeName="fill"
from="#fff" to="#4DAF4C" begin="0s" dur="3s"
fill="freeze" repeatCount="indefinite" />
</path>
<rect x="0" y="0" width="53" height="34" fill="#fff">
<animate attributeType="XML" attributeName="x"
from="0" to="53" begin="0s" dur="3s"
repeatCount="indefinite" />
<animate attributeType="XML" attributeName="width"
from="53" to="0" begin="0s" dur="3s"
repeatCount="indefinite" />
</rect>
</svg>
I don't think this is possible with the fill attribute. But instead, you can invert your SVG path to a rectangle with a triangle like hole. Now you just need a second element behind that path, where you can simply animate the scale in x-direction, to fill the hole from left to right.
Here is an image showing the technique:
An here is a working example:
<svg width="100%" height="100%" viewBox='0 0 450 400'>
<rect x="0" y="0" width="1" height="22" style="fill: black;" >
<animateTransform attributeName="transform" type="scale" from="1 1" to="50 1" begin="0s" dur="2s" repeatCount="indefinite" />
</rect>
<path fill="#ffffff" d="M0,0v29.8h86V0H0z M6.5,25V5.5L48.8,25H6.5z"/>
</svg>
Note: The answer was updated from triangle to arrow, I won't update my answer as the technique is the same for every shape.
<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>
<defs>
<linearGradient id="left-to-right">
<stop offset="0" stop-color="#4DAF4C">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="#fff">
<animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
<path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />
</svg>
I'm a SVG beginner so please bear with me.
Basically, I wish to animate a triangle to move from top to bottom when click and move from bottom to top if click again.
My problem is now I can only move a triangle from top to bottom by clicking it. Can anyone suggest a solution to this issue? Any guidance would be appreciated.
<svg viewBox="0 0 24 24" preserveAspectRatio="none">
<polygon points="2,-5 12,6 22,-5" fill="#000">
<animate attributeName="points" attributeType="XML"
from="2,-5 12,6 22,-5" to="2,0 12,11 22,0"
begin="click" dur="0.5s"
fill="freeze">
</animate>
</polygon>
</svg>
Or click this link: jsfiddle
Here's a SMIL only answer. If you want IE support, add fakeSmile.
<svg viewBox="0 0 24 24" preserveAspectRatio="none">
<polygon points="2,0 12,11 22,0" fill="#000" display="none">
<animate id="a2" attributeName="points" attributeType="XML"
from="2,0 12,11 22,0" to="2,-5 12,6 22,-5"
begin="click" dur="0.5s"
fill="freeze">
</animate>
<set attributeName="display" to="block" begin="a1.end" fill="freeze" />
<set attributeName="display" to="none" begin="a2.end" fill="freeze" />
<set attributeName="points" to="2,0 12,11 22,0" begin="a2.end" fill="freeze" />
</polygon>
<polygon points="2,-5 12,6 22,-5" fill="#000">
<animate id="a1" attributeName="points" attributeType="XML"
from="2,-5 12,6 22,-5" to="2,0 12,11 22,0"
begin="click" dur="0.5s"
fill="freeze">
</animate>
<set attributeName="display" to="none" begin="a1.end" fill="freeze" />
<set attributeName="points" to="2,-5 12,6 22,-5" begin="a1.end" fill="freeze" />
<set attributeName="display" to="block" begin="a2.end" fill="freeze" />
</polygon>
</svg>
I think that it's not possible with basic svg animate elements, you will need javascript.
(Actually there is what R.Longson proposed in comment)
A dirty way could consist to add a second animate, which will make your element animate to the original step, and trigger the right animate.beginElement() method on click of your <polygon>.
But you will need to keep a reference of the current state you are in, so in the following example, I added a big_state property to the polygon object.
var poly = document.querySelector('polygon');
poly.onclick = function() {
var anims = this.querySelectorAll('animate');
anims[+!!this.big_state].beginElement();
this.big_state = !this.big_state;
}
<svg viewBox="0 0 24 24" preserveAspectRatio="none">
<script type="text/ecmascript" xlink:href="FakeSmile-master/smil.user.js" />
<polygon points="2,-5 12,6 22,-5" fill="#000">
<animate attributeName="points" attributeType="XML" from="2,-5 12,6 22,-5" to="2,0 12,11 22,0" begin="indefinite" dur="0.5s" fill="freeze" id="bigger" />
<animate attributeName="points" attributeType="XML" from="2,0 12,11 22,0" to="2,-5 12,6 22,-5" begin="indefinite" dur="0.5s" fill="freeze" id="smaller" />
</polygon>
</svg>
I try to make a next and previous button with SVG
There are square and triangle. When you see square, If you click next, It should change to triangle. And when you see triangle, If you click previous, It should change back to square.
If I click next then previous, It works perfectly. But when I try to click next again. It not works.
Here is my SVG code
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300">
<text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" >
Prev
</text>
<text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" >
Next
</text>
<g>
<path id="triangle" d="M450 0 L375 200 L525 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animateColor attributeName="fill"
to="rgb(0,255,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animateColor attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<path id="square" d="M75 0 L225 0 L225 200 L75 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animateColor attributeName="fill"
to="rgb(255,0,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animateColor attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" by="-300,0" begin="next.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
additive="sum" accumulate="sum" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" by="300,0" begin="previous.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
additive="sum" accumulate="sum" fill="freeze"/>
</g>
</body>
</html>
This fixes it for me. Note that you should avoid animateColor and use animate instead as animateColor is deprecated in the SVG specification.
<!DOCTYPE HTML>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="300" height="300">
<text id="previous" x="50" y="250" font-family="Verdana" font-size="30" fill="blue" >
Prev
</text>
<text id="next" x="200" y="250" font-family="Verdana" font-size="30" fill="blue" >
Next
</text>
<g>
<path id="triangle" d="M450 0 L375 200 L525 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animate attributeName="fill"
to="rgb(0,255,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animate attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<path id="square" d="M75 0 L225 0 L225 200 L75 200 Z"
stroke="#000000" stroke-width="3"
fill="white">
<animate attributeName="fill"
to="rgb(255,0,0)" begin="mouseover" dur="1s"
additive="sum" fill="freeze"/>
<animate attributeName="fill"
to="rgb(255,255,255)" begin="mouseout" dur="1s"
additive="sum" fill="freeze"/>
</path>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="0,0" by="-300,0" begin="next.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML"
type="translate" from="-300,0" by="300,0" begin="previous.click" dur="1s"
keyTimes="0; 1" calcMode="spline" keySplines=".5 0 .5 1"
fill="freeze"/>
</g>
</body>
</html>