ホバーでSVG animateMotionを停止するには？

Iパスを使用しています：上記のように、私は円をアニメートするホバーでSVG animateMotionを停止するには？

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400" xml:space="preserve"> 
<g class="path path--1"> 
    <path class="path_layer" id="path1" d="M200,240c-80,0 -80,-80 0,-80c80,0 80,80 0,80" stroke="#333333" stroke-width="2" fill="none"/> 
</g> 
<circle r="5" fill="white" id="planet"> 
     <title>Computer Science</title> 
     <animateMotion dur="15s" repeatCount="indefinite" keyPoints="0.5;0;1;0.5" keyTimes="0;0.5;0.5;1" calcMode="linear"> 
      <mpath xlink:href="#path1" /> 
     </animateMotion> 
</circle>

それに沿っ。

ここで、私はホバーのアニメーションを停止したいと思います。サークル上を移動すると、アニメーションを停止してから、停止した場所からアニメーションを再開したいと考えています。 CSSの方法はこれでは機能しません。私はJSを使うべきですか？もしそうなら、どうしたらいいですか？

出典

2017-02-05 Ketan Shenoy

いいえ、これはSVGです。これはSVGの要素を指定された答えで制御することはできません。 –

SVG DOMを使用すると、アニメーションタイムラインを一時停止または一時停止することができます。 <svg> element's interfaceには、以下の便利な方法があります。

pauseAnimations(); // pauses the SMIL animation 
unpauseAnimations(); // resumes the SMIL animation 

setCurrentTime(); // changes the timeline thereby allowing you to rerun an animation

出典

2017-02-05 16:25:02

複数の円でアニメーションを作成している場合は、すべてのアニメーションが停止します。回避する方法を教えてください。 –

iframeやobjectタグを使って別々のドキュメントに貼り付けることができます。アニメーションの状態を記録した後、アニメーションを削除して再作成するなど、他の選択肢は難しくなりますが不可能ではありません。 –

ありがとう、私はそれが働くようになった。 –

ホバーでSVG animateMotionを停止するには？

答えて

関連する問題