动画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为stroke-dasharray设置动画。 使用短划线长度和偏移的动画值来播放以创建不同的效果。

以下是如何操作的示例。

 .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; } } 

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

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

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

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