We Keep Coding

How to draw an animated SVG to a Canvas at a specific time offset?

Consider any animated SVG defined as HTML <svg> tag. How do I draw the SVG's content at a specific time index to a canvas using client-side JS?
What I am looking for is a function drawAnimatedSVG(fromSVG, toCanvas, animationOffset) that I can invoke with an SVG and Canvas DOM Node and number specifying the amount of secods (as floating point value) elapsed since the animation's beginning. The drawn result should only be a still image. I know that an SVG Element has a setCurrentTime method, but I can't figure out how to get the actual image at a specific time.
Please note that just waiting or delaying is not an option for me, as the SVGs I am dealing with contain animations lasting for minutes. That's why this answer does not help me.
Example SVG:
<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" rx="15" />
<circle r="5" fill="blue">
<animateTransform
attributeName="transform"
type="translate"
from="10,10" to="90,90"
begin="0" dur="2" repeatCount="0" />
<animateTransform
attributeName="transform"
type="translate"
from="90,90" to="10,90"
begin="2" dur="2" repeatCount="0"/>
<animateTransform
attributeName="transform"
type="translate"
from="10,90" to="10,10"
begin="4" fill="freeze"
dur="2" repeatCount="0"/>
</circle>
</svg>

Draw arrows between two circles using svg

I am using svg to draw several arcs with arcs on the end between 2 circles with the help of Bezier quadratic path.
Here is the final effect I want to achieve.
http://www.apcjones.com/arrows/
I already had some idea about how to draw several arcs(without arrows) between two circles.
But when I tried to draw several arcs(with arrows on the end) between 2 circles, something weird happened.
I am using here and I set refX to "radius" of the circle to offset the line inside the circle. But I soon realized that simply using refX does not solve the problem, the angle of the marker should also be adjusted(I do not know how).
current effect
Thanks for the help!

In this case you may need to use markers.
<svg width="200" height="100" viewBox="0 0 200 100">
<defs>
<desc>Define the marker</desc>
<marker id="arrow" refX="4" refY="3" markerWidth="6" markerHeight="6" orient="auto" stroke="black">
<path d="M 0 0 L 4 3 L 0 6 Z"></path>
</marker>
</defs>
<desc>Use the markers</desc>
<circle cx="160" cy="50" r="20" />
<circle cx="50" cy="50" r="20" />
<line x1="70" y1="50" x2="140" y2="50" fill="none" stroke="black" stroke-width="2" marker-end="url(#arrow)"></line>
</svg>
If you need more help please edit your question and add your SVG code

How to stop SVG animateMotion on hover?

I am using a path:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" xml:space="preserve">
<g class="path path--1">
<path class="path_layer" id="path1" d="M200,240c-80,0 -80,-80 0,-80c80,0 80,80 0,80" stroke="#333333" stroke-width="2" fill="none"/>
</g>
<circle r="5" fill="white" id="planet">
<title>Computer Science</title>
<animateMotion dur="15s" repeatCount="indefinite" keyPoints="0.5;0;1;0.5" keyTimes="0;0.5;0.5;1" calcMode="linear">
<mpath xlink:href="#path1" />
</animateMotion>
</circle>
along which I will be animating the circle as shown above.
Now, I would like to stop the animation on hover, any idea how to do this?
When I hover on the circle, I want to stop the animation and later resume it from wherever I stopped it. The CSS way does not work for this. Should I use JS, if so, how?

You can use the SVG DOM to pause and unpause the animation timeline. The <svg> element's interface has the following useful methods:
pauseAnimations(); // pauses the SMIL animation
unpauseAnimations(); // resumes the SMIL animation
setCurrentTime(); // changes the timeline thereby allowing you to rerun an animation

svg path animate whole whole path

I have a simple path that animates with from="0%" to="100%", but only a part of the path shows up. How can I animate from the beggining to the end of the path?
<svg>
<path d="M100,100 S150,100 200,150 S150,150 100,200 S100,200 100,300 S200,300 300,300 S200,300 100,200 S100,200 100,300 S200,300 300,300 S315,300 330,200" stroke="black" stroke-width="1" fill="none" stroke-dasharray="100000,100000" id="foo">
<animate xlink:href="#foo" attributeName="stroke-dasharray" dur="1s" fill="freeze" from="0%" to="100%"></animate>
</path>
</svg>
http://jsfiddle.net/8g2k2cy4/

Ok, found a way to it, maybe there are better ways...
So the svg path element has a .getTotalLength(); method that returns the path length. This way I can apply/use that in the animate element via JavaScript like:
var animEl = document.querySelector('animate');
animEl.setAttribute('to', animEl.parentNode.getTotalLength());
http://jsfiddle.net/8g2k2cy4/1/

SVG transform circle into simple line

I'm trying to animate a simple SVG circle (white background or any other color) so that when you hover over it it becomes a simple vertical line (in other words, it sort of flattens into a line) and on mouse out, well, then it animates into a circle again.
Yet I can't find much information on how to approach it... Any and every help will be greatly appreciated!

An example of the animation using scale
<svg width="500" height="150">
<circle cx="60" cy="60" r="40" style="stroke:#006600; fill:#00cc00" >
<animateTransform
attributeName="transform"
begin="0s"
dur="2s"
type="scale"
from="1 1"
to="1 0.01"
repeatCount="indefinite"
/>
</circle>
</svg>