SVG开始=“鼠标悬停”不工作答案

【问题标题】：svg begin="mouseover"not workingSVG开始=“鼠标悬停”不工作
【发布时间】：2015-01-04 17:22:19
【问题描述】：

我是编码新手，正在尝试使用 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>

【问题讨论】：

什么浏览器？在 Chrome 中运行良好。

标签： svg mouseover

【解决方案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>

【讨论】：