Question

我是编码的新手，我正在尝试使用svg创建一条简单的线绕其中心旋转。

我有线旋转，但每次我添加开始=＆＃34;鼠标悬停＆＃34;动画不再开始了。

如果有人能帮助我使用悬停事件，我将不胜感激。

<svg>

      <line id="line_01" x1="20" y1="100" 
          x2="100" y2="20" 
          stroke="black" 
          stroke-width="2" stroke-linecap="round" />

  <animateTransform 
           xlink:href="#line_01"
           attributeName="transform" 
           pointer-events="all"
           attributeType="XML"
           type="rotate"
           from="0 60 60"
           to="360 60 60" 
           dur="3s"
           />

</svg>

Answer 1

您需要先将鼠标悬停在元素的id之前，例如

<svg width="100%" height="100%">

      <line id="line_01" x1="20" y1="100" 
          x2="100" y2="20" 
          stroke="black" 
          stroke-width="2" stroke-linecap="round" />

  <animateTransform 
           xlink:href="#line_01"
           begin="line_01.mouseover"
           attributeName="transform" 
           pointer-events="all"
           attributeType="XML"
           type="rotate"
           from="0 60 60"
           to="360 60 60" 
           dur="3s"
           />

</svg>

svg begin =“mouseover”无效

1 个答案: