I want to add animation on my chart.I'm using jquery(append) to add animation tag on my html page but the animation doesn't work.
The animation tag attributs such as attributename or repeatcount have one capital letter and if i add this with attr method or another the capital letter is ignored and the animation doesn't work.
<rect fill="#555" width="2" height="2" x="0" y="0">
<animate attributename="x" from="0" to="0" attributename="XML" dur="1.5s" repeatcount="indefinite"></animate>
<animate attributename="y" from="0" to="0" attributetype="XML" dur="1.5s" repeatcount="indefinite"></animate>
</rect>
That's because you're moving from 0 to 0. If you try to put the capital letters and tell the box to move (let's say from 0 to 2) you'll see something :)
<svg viewBox="0 0 10 10">
<rect fill="#555" width="2" height="2" x="0" y="0">
<animate attributeName="x" from="0" to="2" attributeName="XML" dur="1.5s" repeatCount="indefinite"></animate>
<animate attributeName="y" from="0" to="2" attributeType="XML" dur="1.5s" repeatCount="indefinite"></animate>
</rect>
</svg>
<svg width="1000" height="100">
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="900"
dur="2s"
begin="0s"
values="50; 990; 760; 900"
keyTimes="0; 0.7; 0.8; 1"
fill="freeze"
id="circ-anim"/>
</svg>
I tried writing this instead of the line with the circle:
<text id="textAnimation" x="25" y="25" font-size:24">Learn Now!</text>
but the text doesn't have the animation (yes, I've changed the id #orange-circle to #textAnimation)
Changing the cx to x, fixing the href and correcting the style syntax error on the text element makes it animate for me.
<svg width="1000" height="100">
<text id="textAnimation" x="25" y="25" style="font-size:24px">Learn Now!</text>
<animate
xlink:href="#textAnimation"
attributeName="x"
from="50"
to="900"
dur="2s"
begin="0s"
values="50; 990; 760; 900"
keyTimes="0; 0.7; 0.8; 1"
fill="freeze"
id="circ-anim"/>
</svg>
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>
Can I animate an SVG circle?
<svg>
<circle id="orange-circle" r="30" cx="50" cy="50" fill="orange" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
fill="freeze"
repeatCount="indefinite" />
</svg>
Similarly, I am trying to animate an image:
<svg>
<image id="orange-circle" x="0" y="20" width="200" height="180" xlink:href="cat.png" />
<animate
xlink:href="#orange-circle"
attributeName="cx"
from="50"
to="450"
dur="1s"
fill="freeze"
repeatCount="indefinite" />
</svg>
How can I make the above code work?
Example code (easy) with image is beautiful:
<svg>
<circle fill="blue" cx="150" cy="100" r="50"></circle>
<image xlink:href="http://i.imgur.com/ANS7Rkc.png" x="-50" y="72" width="100" height="50">
<animate attributeName="x" from="-50" to="300" dur="5s" repeatCount="indefinite"></animate>
</image>
</svg>
Example (no image)
https://codepen.io/danjiro/post/how-to-make-svg-loop-animation
Tutorial:
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial
enjoin us ;)
I want to animate a repeating traffic light just like in real life. I am changing the opacity from dark to brighter to display which light is on. Which works but it doesn't repeat.
Pattern I want
Redlight for 6 seconds...turn off
then begin Yellowlight for 3 seconds...turn off
then begin Greenlight for 6 seconds...turn off
Then back to Yellowlight for 3 seconds...turn off
Then back to Redlight for 6 seconds ...turn off
and the pattern keeps repeating.
Pattern I have
Redlight begin at 0s for 2 seconds ...then turn off
Yellowlight begin at 2s for 2 seconds...then turn off
Greenlight begin at 4s for 2 seconds...then turn off
They all stay off (no repeat)
The SVG code (for the pattern I have):
<svg>
<line x1="100" y1="100" x2="400" y2="100" style="stroke: green; stroke-width:50" />
<line x1="400" y1="0" x2="400" y2="600" style="stroke: green; stroke-width:50" />
<rect x="300" y="600" height="100" width="200" fill="green"></rect>
<rect id="stoplight" x="30" y="0" height="308" width="100"></rect>
<rect id="redlight" x="55" y="25" height="60" width="50"></rect>
<animate xlink:href="#redlight" id="redlight" attributeName="opacity" from=".3" to="1" dur="2s" begin="0s"/>
<rect id="yellowlight" x="55" y="125" height="60" width="50"></rect>
<animate xlink:href="#yellowlight" id="yellowlight" attributeName="opacity" from=".3" to="1" dur="2s" begin="2s"/>
<rect id="greenlight" x="55" y="225" height="60" width="50"></rect>
<animate xlink:href="#greenlight" id="greenlight" attributeName="opacity" from=".3" to="1" dur="2s" begin= "4s" />
</svg>
We just started learning SVG so I'm just a beginner.
JSFiddle
Update Edited the code with repeating lights working. Issues with the pattern, the yellow light transitions back to red light.
Updated: JSFiddle
You've multiple elements with the same id which is invalid. After fixing that you can target the animation end correctly e.g.
<rect id="stoplight" x="30" y="0" height="308" width="100"></rect>
<rect id="redlight" x="55" y="25" height="60" width="50"></rect>
<animate xlink:href="#redlight" id="redlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="0s;greenlight2.end"/>
<rect id="yellowlight" x="55" y="125" height="60" width="50"></rect>
<animate xlink:href="#yellowlight" id="yellowlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="2s"/>
<rect id="greenlight" x="55" y="225" height="60" width="50"></rect>
<animate xlink:href="#greenlight" id="greenlight2" attributeName="opacity" from=".3" to="1" dur="2s" begin="4s" />