Я пытаюсь использовать SVG animate и animateTransform

Question

Я пытаюсь использовать SVG animate и animateTransform. Анимация запускается с помощью мыши и мыши.

Первый пример, который я сделал, изменяет цвета объектов во время событий mouseover и mouseout и, кажется, работает хорошо.

Во втором Я пытаюсь изменить поворот во время событий mouseover и mouseout , используя: fill = "freeze" additive = "sum".

Но, кажется, хорошо работает только при первом наведении курсора мыши, все следующее событие наведения курсора происходит странным образом.

Я пробовал много раз, изменяя все параметры, но я думаю, может быть, это ошибка SVG.

спасибо за вашу помощь

это ссылка

https://www.googledrive.com/host/0BwRlR3z6e0egY2RtWXZmVmU1Y0U/test_mouse_in_out.svg

Это код

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="842px" height="595px" viewBox="0 0 842 595" enable-background="new 0 0 842 595" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace"> 
    <path transform="matrix(1 0 0 1 552.381 250.537)" stroke-width="1.4834077083798625" stroke-miterlimit="3" stroke="#000000" fill="#3D70B1" d="... "> 
     <animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="rotate" begin="mouseover" dur="1" repeatCount="1" fill="freeze" additive="sum" calcMode="spline" keySplines=".5 0 .5 1" values="0 50 25;180 50 25"/> 
     <animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="rotate" begin="mouseout" dur="2" repeatCount="1" fill="freeze" additive="sum" calcMode="spline" keySplines=".5 0 .5 1" values="0 50 25;-180 50 25"/> 
    </path> 
    <path transform="matrix(1 0 0 1 150.733 232.565)" stroke-width="1.0106517551310161" stroke-miterlimit="3" stroke="#000000" fill="#2128DF" d="..."> 
     <animate xmlns="http://www.w3.org/2000/svg" attributeName="fill" attributeType="CSS" begin="mouseover" dur="0.5" restart="whenNotActive" repeatCount="1" fill="freeze" to="#FF0000"/> 
     <animate xmlns="http://www.w3.org/2000/svg" attributeName="fill" attributeType="CSS" begin="mouseout" dur="0.5" repeatCount="1" fill="freeze" to="#2128DF"/> 
    </path> 
</svg> 

Answer 1

Это то, что вы пытаетесь достичь?

<?xml version="1.0" encoding="utf-8"?> 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="842px" height="595px" viewBox="0 0 842 595" enable-background="new 0 0 842 595" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace"> 
    <g transform="matrix(1 0 0 1 552.3817663817669 250.5378939494907)" > 
     <path width="100" height="193.24786324786277" stroke-width="1.4834077083798625" stroke-miterlimit="3" stroke="#000000" fill="#3D70B1" d="M49.17044074315265,-81.02222443382041 L100,0 L100,61.9415551961163 Q99.5833333333336,111.38520427855761 52.11894586894584,112.22563881404236 Q4.654558404558088,113.06607334952727 0,61.9415551961163 L0,0 L49.17044074315265,-81.02222443382041 Z "> 
      <animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="rotate" begin="mouseover" restart="whenNotActive" dur="1" repeatCount="1" fill="freeze" additive="replace" calcMode="spline" keySplines=".5 0 .5 1" values="0 50 25;180 50 25"/> 
      <animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="rotate" begin="mouseout" dur="2" repeatCount="1" fill="freeze" additive="sum" calcMode="spline" keySplines=".5 0 .5 1" values="0 50 25;-180 50 25"/> 
     </path> 
    </g> 
    <path transform="matrix(1 0 0 1 150.73359748845195 232.56562387630248)" width="202.57122507122506" height="91.53846153846155" stroke-width="1.0106517551310161" stroke-miterlimit="3" stroke="#000000" fill="#2128DF" d="M182.57122507122506,0 Q202.57122507122506,0 202.57122507122506,20 L202.57122507122506,71.53846153846155 Q202.57122507122506,91.53846153846155 182.57122507122506,91.53846153846155 L20,91.53846153846155 Q0,91.53846153846155 0,71.53846153846155 L0,20 Q0,0 20,0 L182.57122507122506,0 Z "> 
     <animate xmlns="http://www.w3.org/2000/svg" attributeName="fill" attributeType="CSS" begin="mouseover" dur="0.5" restart="whenNotActive" repeatCount="1" fill="freeze" to="#FF0000"/> 
     <animate xmlns="http://www.w3.org/2000/svg" attributeName="fill" attributeType="CSS" begin="mouseout" dur="0.5" repeatCount="1" fill="freeze" to="#2128DF"/> 
    </path> 
</svg> 

jsfiddle