SVGアニメーションをボタン上にホバーしながら再生する

Question

SVGのアニメーションがすでにSVGに含まれているので、SVGアイコン上にマウスを置いてアニメーションを開始する方法が問題になります。移動する各部分。

そして、私はそれをsvgからホバリングするとどのように元に戻すでしょうか？ https://codepen.io/Zeruw/pen/MpLRqR

Codepenプロジェクト：あなたがボタンの上に置くと、それはオレンジ色になり、SVGが回転を開始しなく見ることができるプロジェクトで https://codepen.io/Zeruw/project/editor/DVeMEA/

SVG自体を提供

<?xml version="1.0" encoding="utf-8"?> 
<svg id="family" image-rendering="auto" baseProfile="basic" 
version="1.1" x="0px" y="0px" width="550" height="550" 

私が意図した通りに、まず凍結して、ボタンの上にマウスを置くと、SVGの内部に与えられたアニメーションが再生されます。

Answer 1

原則として、svgファイル内のSVG/SMILアニメーションは、CSSアニメーションに頼らずに、希望通りに動作するように変更することができます。

残念ながら、これらのアニメーションの書き方はばかげて複雑です。グループあたり4つの追加アニメーションで20個のキーフレームを使用しました。それらはすべてanimateTransformタイプであるため、グループごとに1つのアニメーションでマトリックス製品として記述できます。各キーフレームの計算を行うと明らかな結果が得られます。すべてがtransform="rotate(a, cx, cy)"で、回転中心が一定の場合cx, cyです。そして、動きは均等に調整され、これらすべてのキーフレームは完全に不必要なものになります。

<g id="fatherHead" transform="translate(96.35 53.15)"> 
     <animateTransform attributeName="transform" additive="replace" type="translate" dur="0.833s" 
          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1" 
          values="176.15,157.45;177.453,158.333;178.648,159.103;179.935,159.911;181.104,160.629;182.261,161.481;183.449,162.199;184.632,162.963;185.711,163.599;186.819,164.308;187.877,165.004;188.916,165.684;189.935,166.338;190.916,166.98;191.921,167.646;192.837,168.282;193.689,168.829;194.633,169.49;195.482,169.967;196.37,170.569;196.37,170.569" 
          fill="freeze"/> 
     <animateTransform attributeName="transform" additive="sum" type="rotate" dur="0.833s" 
          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1" 
          values="0,0,0;.78,0,0;1.558,0,0;2.52,0,0;3.291,0,0;4.056,0,0;5.007,0,0;5.765,0,0;6.52,0,0;7.27,0,0;8.019,0,0;8.762,0,0;9.315,0,0;10.051,0,0;10.782,0,0;11.511,0,0;12.048,0,0;12.766,0,0;13.297,0,0;14,0,0;14,0,0" 
          fill="freeze"/> 
     <animateTransform attributeName="transform" additive="sum" type="scale" dur="0.833s" keyTimes="0;.25;.3;1" 
          values="1,1;1,1;1,.999;1,.999" fill="freeze"/> 
     <animateTransform attributeName="transform" additive="sum" type="translate" dur="0.833s" 
          keyTimes="0;.05;.1;.15;.2;.25;.3;.35;.4;.45;.5;.55;.6;.65;.7;.75;.8;.85;.9;.95;1" 
          values="-79.8,-104.3;-79.85,-104.4;-79.8,-104.4;-79.9,-104.4;-79.85,-104.35;-79.8,-104.35;-79.85,-104.4;-79.9,-104.4;-79.9,-104.3;-79.85,-104.35;-79.9,-104.3;-79.9,-104.35;-79.9,-104.3;-79.9,-104.3;-79.9,-104.4;-79.85,-104.4;-79.85,-104.35;-79.85,-104.4;-79.85,-104.35;-79.8,-104.35;-79.8,-104.35" 
          fill="freeze"/> 
     <path d="..." /> 
    </g> 

は、このように次のステップのために

<g id="fatherHead" transform="translate(96.35 53.15)"> 
     <animateTransform attributeName="transform" additive="sum" 
          type="rotate" dur="0.833s" 
          from="0,36.691,193.224" to="14,36.691,193.224" 
          fill="freeze"/> 
     <path d="..." /> 
    </g> 

に煮詰めすることができ、あなたはアニメーションが任意の要素上のイベントによって開始することができるという事実を利用することができます。マウスが最も外側の要素Scene-1r1の上にマウスを置いたときにアニメーションを開始することは可能ですが、それは問題があります。ホバリングは、塗りつぶした領域の上にあると解釈されます。解決方法は、画像のサイズをキャプチャオーバーレイの矩形です。viewBox：

<rect id="mask" x="0px" y="0px" width="550" height="550" opacity="0"/> 

これを最上位要素として挿入します。 opacity="0"は見えなくなりますが、ホバーブルです。この時点で解決

<g id="fatherHead" transform="translate(96.35 53.15)"> 
     <animateTransform attributeName="transform" additive="sum" 
          type="rotate" dur="0.833s" begin="mask.mouseover" 
          from="0,36.691,193.224" to="14,36.691,193.224" 
          fill="freeze"/> 
     <path d="..." /> 
    </g> 

あなたが言うことができ、問題：

さて、アニメーションは、属性begin="mask.mouseover"を得ることができます。しかし、マウスを再び動かすとどうなりますか？それほど美しいものではありません。

ヘッドをホバー上で1回だけ動かし、もう一度動かしたくない場合は、単にrestart="never"というアトリビュートを追加するだけです。

元の位置に制御された移行を戻したい場合は、mouseoutの移行を元に戻すことでこれを行うことができます。これらの遷移を追加すると、偽の行動につながり、それがわずかに異なる構造を是正することができます。

今

<g id="fatherHead" transform="translate(96.35 53.15)"> 
     <g> 
     <animateTransform attributeName="transform" additive="replace" 
          type="rotate" dur="0.833s" begin="bg.mouseover" 
          from="0,36.691,193.224" to="14,36.691,193.224" 
          fill="freeze"/> 
     <animateTransform attributeName="transform" additive="replace" 
          type="rotate" dur="0.1s" begin="bg.mouseout" 
          from="14,36.691,193.224" to="0,36.691,193.224" 
          fill="freeze"/> 
     <path d="..." /> 
     </g> 
    </g> 

マウスが画像から離れると、ヘッドは元の位置に戻って移動します。

完全コード：http://codepen.io/anon/pen/wJOjvg