Question

我正在尝试使用SVG animate和animateTransform。使用鼠标悬停和鼠标移除触发动画。

我做的第一个示例，在鼠标悬停和鼠标移除事件期间更改了对象颜色，似乎运行良好。

在第二个我试图在鼠标悬停和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

我正在尝试使用SVG animate和animateTransform

1 个答案: