带有 CSS 和 :hover 的 SVG 动画答案

【问题标题】：SVG animation with CSS and :hover带有 CSS 和 :hover 的 SVG 动画
【发布时间】：2015-11-30 11:42:19
【问题描述】：

当鼠标悬停在容器 dom 元素 (a) 上时，我正在尝试为 svg 路径设置动画，该元素比 svg 元素本身大（用于更大的接触区域）。我无法旋转整个容器，因为 svg 元素将包含更多路径，这些路径应该是静态的。现在绿色箭头不接受鼠标离开时的初始位置，我希望看到这种情况发生。

https://jsbin.com/juqene/18/edit?html,css,output

HTML：

<div id="outer">
    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56">
        <path id="arrow" fill="none" stroke="#21B469" stroke-miterlimit="10" d="M26.637 55.68L.583 28.346 25.333.32"/>
    </svg>
</div>

CSS：

#arrow {
     transform: none;
}

#outer:hover #arrow {
   transform: rotate(10deg);
}

【问题讨论】：

标签： css svg transform

【解决方案1】：

改变这个

#arrow {
  transform: none
}

到这里

#arrow {
  transform: rotate(0);
}

#inner {
  width: 10px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
}
#arrow {
  transform: rotate(0);
}
#outer:hover #arrow {
  transform: rotate(10deg);
}

<div id="outer">
  <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56">
    <path id="arrow" fill="none" stroke="#21B469" stroke-miterlimit="10" d="M26.637 55.68L.583 28.346 25.333.32" />
  </svg>
</div>

【讨论】：

你比光还快）。完美运行。