Launch Svg animateMotion on Jquery event - html

Question

I am currently working on svg animations.
I have a SVG element which follows a path with the animateMotion property.
My shape :
<g id="dart" transform="scale(-1,1) translate(-587, -145)">
<path d="..." />
</g>
My path :
<path id="motionPath" fill="none" stroke="none" stroke-miterlimit="10" d="..."/>
My AnimateMotion :
<animateMotion xlink:href="#dart" dur="1s" begin="0s" fill="freeze" rotate="auto"><mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#motionPath"></mpath></animateMotion>
It works perfectly. However, it begins to move after 2s when page is loaded. I would like to launch the animation on an JS event. Indeed, I need to scroll down in the page for see the SVG and when he is visible the animation starts.
The JS :
var pos = $("#dart").offset().top;
$(window).scroll(function(){
var scrollTop=$(window).scrollTop();
if(scrollTop>=pos){
/* --- start animation here with injecting --- */
var motion=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
motion.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#dart");
motion.setAttributeNS("http://www.w3.org/2000/svg", "dur", "1s");
motion.setAttributeNS("http://www.w3.org/2000/svg", "begin", "0s");
motion.setAttributeNS("http://www.w3.org/2000/svg", "fill", "freeze");
motion.setAttributeNS("http://www.w3.org/2000/svg", "rotate", "auto");
var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");
mpath.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#motionPath");
motion.appendChild(mpath);
document.getElementById("target").appendChild(motion);
}
});
I tried to inject (with createElementNS) the <animateMotion> or to change the begin's value in order to start the animation on the event but it does not work.
If someone has an idea...

Answer 1

To summarise what I originially wrote in comments...
You'd normally set the animate motion to begin on click by setting its begin attribute e.g. begin="dart.click"
jquery is designed to work with html, any svg support is mostly by accident. So when it creates elements it creates them in the html namespace rather than the SVG namespace. So the first step is to convert your code to using standard DOM methods such as document.createElementNS.
If you do use the DOM to create elements and attributes, take care to create them in the correct namespace.
SVG elements should be created in the SVG namespace
most attributes are in the null namespace and should be set by calling element.setAttribute
xlink:href attributes are in the xlink namespace however and must be created by calling element.setAttributeNS, passing the xlink namespace as the first argument.