svg begin = "mouseover"not working

Question

새로운 코딩 작업에서 svg를 사용하여 중심을 중심으로 간단한 선을 회전하려고합니다.

나는 선이 회전하고 있지만 매 시간마다 begin = "mouseover"를 추가하면 애니메이션이 더 이상 시작되지 않습니다.

누군가 내가 호버 이벤트로이 작업을하도록 도울 수 있다면 크게 감사하겠습니다.

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

어떤 브라우저