html - How to stop svg animation with css? -

i want stop animation when animation completed. made 1 box , box made "s" symbol. when box make s want stop animation in s place.

<svg  viewbox="0 -150 300 600" width='400px' height='100%' id='layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' onload='init(evt)'  enable-background="new 0 0 141.4 141.4">     <script type="text/javascript">          var svgdocument = null;         var svgroot = null;         function init(evt) {             svgdocument = evt.target.ownerdocument;             svgroot = svgdocument.documentelement;         }         function pause() {             svgroot.pauseanimations();         }         function play() {             svgroot.unpauseanimations();         }     </script>     <g id="layer_1_copy">         <animatetransform begin="layer_1.mouseover" id="delayone" dur="6980ms" onend='pause()' type="translate" attributetype="xml" attributename="transform" />         <animatetransform begin="layer_1.mouseover" id="delaytwo" dur="6990ms" onend='play()' type="translate" attributetype="xml" attributename="transform" repeatcount="indefinite" />          <path fill="#5db228" stroke="#ffffff" d="m70.7,70.7l35.3,35.3l70.7,0l106,35.3l70.7,70.7z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="45 210 -11" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout"/>         </path>          <path fill="#5db228" stroke="#ffffff" d="m70.7,0l0,70.7v0l70.7,0l70.7,0z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="-45 -60 -30" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout" />         </path>          <path fill="#5db228" stroke="#ffffff" d="m141.4,141.4l70.7,70.7l141.4,0v141.4z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="-45 10 141" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout"/>         </path>          <path fill="#5db228" stroke="#ffffff" d="m141.4,141.4l70.7,70.7l0,141.4h141.4z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="45 114 97" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout"/>         </path>          <path fill="#5db228" stroke="#ffffff" d="m141.4,0h70.7l106,35.3l141.4,0z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="45 -57 28" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout" />         </path>          <path fill="#5db228" stroke="#ffffff" d="m35.3,106v35.3l0,70.7v70.7l35.3,106z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="45 -67 173" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout"/>         </path>          <path fill="#5db228" stroke="#ffffff" d="m70.7,70.7l35.3,35.3v106l70.7,70.7z">             <animatetransform attributename="transform" attributetype="xml" type="rotate" from="0" to="-135 53 123" dur="7000ms" begin="layer_1.mouseover" end="layer_1.mouseout"/>         </path>     </g> </svg> 

when box make s want stop animation in s place.

the trick using fill="freeze" each animation. makes graphic stay in place animation ends. default fill method reset it's starting point.