Pausing AnimateMotion on mouseover - svg

Question

I have the following SVG code.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="500" preserveAspectRatio="none">
<svg x="10">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#A2B2B1" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z"
onmouseover="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 0;"/>
<animateMotion
path="M14.088,6.647c5.426,0,13.935,0.083,16.278,4.281
c2.343,4.199,8.151,8.273,2.726,12.678c-5.426,4.405-2.753-6.984-10.337-8.479c-7.584-1.496-5.103,5.973-10.528,5.973
S0.557,10.939,6.293,6.647C10.917,3.188,8.663,6.647,14.088,6.647z"
begin="0s" dur="5s" repeatCount="indefinite"
/>
</g>
</svg>
<svg x="200">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#D8D3DE" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z"
onmouseover="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;"
onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 0;"/>
<animateMotion
path="M38.69,22.497c-7.039,3.198-18.123,8.114-23.417,4.53
C9.979,23.443,0.254,22.048,4.927,13.642c4.673-8.406,7.322,6.636,17.965,3.935S26.304,7.508,33.343,4.311
s20.598,5.138,15.461,13.592C44.664,24.718,45.729,19.3,38.69,22.497z"
begin="0s" dur="5s" repeatCount="indefinite"
/>
</g>
</svg>
</svg>
is it possible to pause the animateMotion on mouse over and then restart it on mouse out.
Hosted here if you wanted to see it working - http://cdpn.io/cIfCv

Answer 1

It's possible to pause and unpause all declarative animations in an svg, like this:
<svg id="root" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="500" preserveAspectRatio="none">
<svg x="10">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#A2B2B1" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z" stroke-width="1" stroke="none" onmouseover="pause(); this.style.stroke='#000000';" onmouseout="unpause(); this.style.stroke='none';" />
<animateMotion path="M14.088,6.647c5.426,0,13.935,0.083,16.278,4.281
c2.343,4.199,8.151,8.273,2.726,12.678c-5.426,4.405-2.753-6.984-10.337-8.479c-7.584-1.496-5.103,5.973-10.528,5.973
S0.557,10.939,6.293,6.647C10.917,3.188,8.663,6.647,14.088,6.647z" begin="0s" dur="5s" repeatCount="indefinite" />
</g>
</svg>
<svg x="200">
<g>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#D8D3DE" d="M78.447-0.167c46.51-0.516,69.627,42,81.004,77.004
c12.313,37.886-7.802,73.92-35.002,82.504C82.63,172.54,33.583,136.621,14.944,115.339c-7.92-9.042-19.932-22.157-14.001-41.502
c9.402-30.666,31.449-50.303,56.003-66.003C64.113,5.167,71.281,2.5,78.447-0.167z" stroke-width="1" onmouseover="pause(); this.style.stroke = '#000000';" onmouseout="unpause(); this.style.stroke = 'none';" />
<animateMotion path="M38.69,22.497c-7.039,3.198-18.123,8.114-23.417,4.53
C9.979,23.443,0.254,22.048,4.927,13.642c4.673-8.406,7.322,6.636,17.965,3.935S26.304,7.508,33.343,4.311
s20.598,5.138,15.461,13.592C44.664,24.718,45.729,19.3,38.69,22.497z" begin="0s" dur="5s" repeatCount="indefinite" />
</g>
</svg>
<script>
var svg = document.getElementById("root");
function pause() {
svg.pauseAnimations();
}
function unpause() {
svg.unpauseAnimations();
}
</script>
</svg>
See fiddle.