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've recently been dipping my toe into SVGs and I'm currently trying to morph a diamond into a circle when the user hovers over it.
I found this tutorial over at CSS Tricks
I've noticed that they're using points to do the animation however my SVG shapes are:
<circle cx="49.873" cy="50.155" r="49.845"/>
and
<rect x="15.211" y="14.798" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -20.8426 50.3112)" width="70.198" height="71.034"/>
Is there a way to do this? How would I get the points of these shapes so I could follow the CSS Tricks tutorial?
For those interested:
<svg viewBox="0 0 300 300" width="500" height="500" style="border:1px solid red;"preserveAspectRatio="xMinYMax meet">
<rect id="shape2" rx="0" y="0" x="100" width="50" height="50" transform="rotate(45)">
<animate begin="shape2.mouseover" attributeName="rx" dur="700ms" to="50%" fill="freeze"/>
<animate begin="shape2.mouseout" attributeName="rx" dur="700ms" to="0" fill="freeze"/>
</rect>
</svg>
http://jsfiddle.net/4e71gra6/
Extending the first answer by user1788364:
With saving square value of shape:
https://jsfiddle.net/HoretskiyDima/xfat6oc2/13/
<svg viewBox="0 0 300 300" width="500" height="500" style="border:1px solid red;"preserveAspectRatio="xMinYMax meet">
<rect id="shape2" rx="0" y="0" x="100" width="50" height="50" transform="rotate(45)">
<!-- Making cirle from rectangle -->
<animate begin="shape2.mouseover" attributeName="rx" dur="2000ms" to="50%" fill="freeze"/>
<animate begin="shape2.mouseout" attributeName="rx" dur="325ms" to="0" fill="freeze"/>
<!-- In order to save square value, we need bigger radius then rectangle -->
<!-- S = width * height -->
<!-- S = PI * r^2 -->
<!-- d = r * 2 = sqrt(S/PI) * 2 = 56 -->
<animate begin="shape2.mouseover" attributeName="width" dur="375ms" to="56" fill="freeze"/>
<animate begin="shape2.mouseout;370ms" attributeName="width" dur="675ms" to="50" fill="freeze"/>
<animate begin="shape2.mouseover" attributeName="height" dur="375ms" to="56" fill="freeze"/>
<animate begin="shape2.mouseout;370ms" attributeName="height" dur="675ms" to="50" fill="freeze"/>
<!-- In order to pin shape center position on the screenm we need to move back on half of delta radius -->
<!-- (56 - 50) / 2 = 3 -->
<animate begin="shape2.mouseover" attributeName="x" dur="375ms" to="97" fill="freeze"/>
<animate begin="shape2.mouseout" attributeName="x" dur="675ms" to="100" fill="freeze"/>
<animate begin="shape2.mouseover" attributeName="y" dur="375ms" to="-3" fill="freeze"/>
<animate begin="shape2.mouseout" attributeName="y" dur="675ms" to="0" fill="freeze"/>
<!-- TODO: "rx" attribute animation timing working strange. -->
</rect>
</svg>