Sprite SVG

<svg width="1000" height="500">
<defs>
<mask id="coin">
<rect x="0" y="0" fill="white" width="100" height="100"/>
</mask>
</defs>
<rect width="900" x="0" y="0" fill="royalblue" height="500"/>
<g>
<image xlink:href="http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/images/coin-sprite-animation.png" width="1000" height="100" x="0" y="0" style="mask:url(#coin);">
<animate attributename="x" begin="0s; 10.end" dur="0.05s" values="-100" id="01"/>
<animate attributename="x" begin="01.end" dur="0.05s" values="-200" id="02"/>
<animate attributename="x" begin="02.end" dur="0.05s" values="-300" id="03"/>
<animate attributename="x" begin="03.end" dur="0.05s" values="-400" id="04"/>
<animate attributename="x" begin="04.end" dur="0.05s" values="-500" id="05"/>
<animate attributename="x" begin="05.end" dur="0.05s" values="-600" id="06"/>
<animate attributename="x" begin="06.end" dur="0.05s" values="-700" id="07"/>
<animate attributename="x" begin="07.end" dur="0.05s" values="-800" id="08"/>
<animate attributename="x" begin="08.end" dur="0.05s" values="-900" id="09"/>
<animate attributename="x" begin="09.end" dur="0.05s" values="-100" id="10"/>
</image>
<animateMotion dur="28s" path="m0,0L738,350L115,400z" repeatCount="indefinite">
</animateMotion>
</g>
</svg>