cssでsvgアニメーションを停止するには？

私のアニメーションが終了したらアニメーションを止めたい。私は1つの箱に作られ、箱は "S"の記号を作った。私のボックスがSを作るとき、私はSの場所で私のアニメーションを止めたいと思う。cssでsvgアニメーションを停止するには？

<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>

ボックスはSを作るとき、私はSの所定の位置にアニメーションを停止します。

出典

2016-08-29 Saya Sharma

このトリックは、アニメーションごとにfill="freeze"を使用しています。これにより、アニメーションが終了する場所にグラフィックが留まります。デフォルトのfillメソッドは、それを開始点に戻すことです。

出典

2016-08-29 07:29:37

ご回答ありがとうございました。私は解決策を見つけました。 –

今私はこのようないくつかのエラーがあります：SVGのSMILアニメーション（、、など）は廃止され、削除されます。代わりに、CSSアニメーションまたはWebアニメーションを使用してください。今私は自分のウェブサイトの私のSVGファイルにすることができません。私は私のウェブサイトでこのアニメーションを使って、Sポジションに止まりませんでした。 –

はい、SMILアニメーションは、Chromeの他のブラウザバージョンで少なくとも削除される可能性があります（IEおよびEdgeではサポートされていません）。代わりにCSSアニメーションを使用することをお勧めします（http://caniuse.com/#featを参照）。 = svg-smilとhttps://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL）。 –

cssでsvgアニメーションを停止するには？

答えて

関連する問題