动画SVG，圆形笔画悬停

Question

想要模仿动画箭头：

http://uve.info/

悬停时，笔划覆盖圆圈，我在Illustrator中创建了形状，很好，定位容易。只是动画中风。

HTML（内联SVG）：

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
    <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28"/>
    <path class="arrow offset-colour" d="M40,1c21.5,0,39,17.5,39,39S61.5,79,40,79S1,61.5,1,40S18.5,1,40,1 M40,0C17.9,0,0,17.9,0,40s17.9,40,40,40s40-17.9,40-40S62.1,0,40,0L40,0z"/>
</svg>

路径，已经是一个圆圈。我想要一个位于当前路径顶部的另一条路径来模拟uve.info站点。整个动画都是通过悬停完成的。这就是箭头应该看起来像动画中期的痛苦。

调用中风的最佳方法是什么？

谢谢大家。

Answer 1

如果您针对某些现代浏览器，我建议使用svg动画。

您可以使用具有圆圈长度（2 * PI * r）的stroke-dasharray和等长的短划线偏移来设置笔画动画。使用短划线长度和偏移的动画值来播放，以创建不同的效果。

以下是如何操作的示例。

＆＃13;

＆＃13;

.circle:hover {
  /* calculate using: (2 * PI * R) */
  stroke-dasharray: 227;
  stroke-dashoffset: 0;
  animation-iteration-count: infinite;
  animation-name: rotate;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes rotate {
  to {
    stroke-dashoffset: 227;
  }
}

＆＃13;

<svg id="right_arrow" class="direction__right direction__item" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle class="circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

＆＃13;

＆＃13;

＆＃13;

使用css animation属性和@keyframes，您可以做各种奇特的事情。如果您想保持简单，您也可以尝试使用transition属性，如下例所示。请注意，我已使用svg transform属性更改了虚线笔划的起点。

＆＃13;

＆＃13;

.another-circle {
  stroke-dasharray: 227;
  stroke-dashoffset: 227;
  transition: stroke-dashoffset 2s linear;
}
.another-circle:hover {
  stroke-dashoffset: 0;
}

＆＃13;

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px" height="80px" viewBox="0 0 80 80" xml:space="preserve">
  <polygon class="ring offset-colour" points="32.5,52 47.5,40 32.5,28" />
  <circle cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="2" />
  <circle transform="rotate(-90 40 40)" class="another-circle" cx="40" cy="40" r="36" fill="transparent" stroke="black" stroke-width="4" />
</svg>

＆＃13;

＆＃13;

＆＃13;