播放SVG動畫時懸停在按鈕上

Question

所以我得到了這個SVG，已經有一個動畫包含在SVG本身，現在我的問題是如何開始動畫，而懸停在SVG圖標上，svg已經有ID的移動的每個部分。

當我將鼠標懸停在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本身： https://codepen.io/Zeruw/pen/MpLRqR

Codepen項目： https://codepen.io/Zeruw/project/editor/DVeMEA/

在該項目中，當你將鼠標懸停在該按鈕，你可以看到它變成橙色和SVG開始旋轉，但不我想要的方式，我希望它首先凍結，一旦你將鼠標懸停在按鈕上，它就會播放SVG中給出的動畫。

Answer 1

原則上，svg文件中的SVG/SMIL動畫可以被修改，因此它們可以按照您希望的方式工作，而無需訴諸CSS動畫。

不幸的是，這些動畫的寫法是非常複雜的。 20個關鍵幀被用於每組四個附加動畫。由於它們都屬於animateTransform類型，因此可以將它們作爲矩陣產品寫入每個組的單個動畫中。對每個關鍵幀進行數學運算會得出一個明顯的結果：它全部爲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上時，將有可能開始動畫，但這有一個問題：懸停會被解釋爲在填充區域之間，所有行之間的所有內容都是「out」。解決方案是一個具有圖像視框大小的捕獲覆蓋矩形：

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

將該圖像插入最頂端的元素; opacity="0"使其看不見，但可以緩解。現在

，動畫可以得到屬性begin="mask.mouseover"：

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

可以說，問題在這一點上得到解決。但是當你再次移動鼠標時會發生什麼？這不是很漂亮。

如果您希望頭部在懸停時只移動一次，並且不再一次，只需添加屬性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> 

現在，頭移回原來的位置，當鼠標離開圖像。

完整的codepen：http://codepen.io/anon/pen/wJOjvg