Hi,
Can someone tell me what would be the easy and the best way for animating SVG in Ionic?
I know there are CSS animations, and some popular libraries like Snap.svg.Not sure which one makes the better solution?
Thanks in advance!!
Hi,
Can someone tell me what would be the easy and the best way for animating SVG in Ionic?
I know there are CSS animations, and some popular libraries like Snap.svg.Not sure which one makes the better solution?
Thanks in advance!!
Snap.svg has been pretty performant for me. Also, there are some project you can look at and take some inspiration from.
http://tympanus.net/Development/AnimatedSVGIcons/
Another option would be something like this.
<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#fff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</path>
<circle fill="#fff" cx="36" cy="18" r="1">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur="0.9s"
repeatCount="indefinite" />
</circle>
</g>
</g>
</svg>
Thank you! I will give it a shot.