Animating SVG Inline - animation

Question

I have this setup working beautifully with SVG but I was curious if anyone knew how to smooth the transition and/or add animation between the hover animations I have. Right now the scale is being increased on hover and if I could get that animated somehow that would be awesome. I imagine inline JS somewhere would be best / most flexible, but i'm not sure exactly how to animate SVG properlly...
http://jsfiddle.net/468gm/
I imagine somewhere inline here would be best, but again im not sure if its possible to smooth the existing scale effect with inline SVG or if a different method would be needed to achieve a animated version of this hover effect
importedPaths.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")

Answer 1

After some playing around with your code I decided a non-js solution would be the best since you don't have a dynamic number of arrows. Check out the rough demo
I was able to add a CSS hover event to the elements by first putting them each in their own group (<g>) and applying the transform you gave them to that group. Then on hover I used transform: scaleY(1.3); and transition:all 0.5s to make the arrows grow. You also have to have a default scale(1) for the paths which I didn't expect, but that's just another couple lines
/* CSS */
use:hover {
-webkit-transform:scaleY(1.3);
transform:scaleY(1.3);
}
use {
-webkit-transform:scaleY(1);
transform:scaleY(1);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
transition:all 0.5s;
}
/* SVG */
<svg id="mySVG" x="0" y="0" width="900" height="800" overflow="visible">
<defs id="myDefs">
<g id="myBlackArrow" fill="#0a8c9e" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)" filter="url(#f2)" >
<path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
<path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
</g>
<g id="myGrayArrow" fill="#1c9eb0" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)" filter="url(#f1)">
<path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
<path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
</g>
<g id="myWhiteArrow" fill="#47c9db" transform="translate(-421.37805790890565 -409.89077969361676)scale(0.1587493937731687 0.1587493937731687)">
<path d="M2553.826,1137.28l-2.772-1.719l29.799,1445.434l195.02,1.004l9.765-1448.729 c0,0-63.94,42.007-113.36,42.007S2553.826,1137.28,2553.826,1137.28z"></path>
<path d="M2451.84,1058.265c0,0,171.983,75.005,216.505,75.005s188.535-75.005,188.535-75.005l-190.691-366.037 L2451.84,1058.265z"></path>
</g>
</defs>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"></feGaussianBlur>
</filter>
</defs>
<defs>
<filter id="f2" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15"></feGaussianBlur>
</filter>
</defs>
<g transform="translate(400 400) rotate( 0)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 22.5)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 45)"><use xlink:href="#myGrayArrow"></use></g>
<!-- Found below -->
<g transform="translate(400 400) rotate( 90)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate(112.5)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 135)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate(157.5)"><use xlink:href="#myGrayArrow"></use></g>
<!-- Found below -->
<g transform="translate(400 400) rotate(202.5)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 225)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate(247.5)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 270)"><use xlink:href="#myGrayArrow"></use></g>
<!-- Found below -->
<g transform="translate(400 400) rotate( 315)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate(337.5)"><use xlink:href="#myGrayArrow"></use></g>
<g transform="translate(400 400) rotate( 67.5)"><use xlink:href="#myWhiteArrow"></use></g>
<g transform="translate(400 400) rotate( 180)"><use xlink:href="#myWhiteArrow"></use></g>
<g transform="translate(400 400) rotate(292.5)"><use xlink:href="#myWhiteArrow"></use></g>
</svg>
The only things you have left to do are to decide which arrows should have #myBlackArrow as opposed to #myGrayArrow (the way you have it on your demo seems random), fix the alignment of the arrows (the groups are wider than they should be - 75px when they are actually only like 65px so the rotation is off by around 10px), and add the gradient to the background
If you're looking to target the specific types to have separate hover events for each, you can add a data- attribute and select it with CSS. I decided to use data-aColor to keep it unique and because it's the arrow color. You can then select the data attribute with CSS by using the following: [data-aColor="gray"] { ... Here's a demo of what I mean