html - SVG 悬停时旋转虚线圆圈边框

Question

我正在尝试使用 CSS 创建 SVG 悬停动画效果。

我想要实现的是，当我将鼠标悬停在我的图标上时，实心圆容器将与虚线容器一起旋转。请参见下图。

看看我到目前为止做了什么:http://jsfiddle.net/uhkwLuph/3/

到目前为止，这是我的代码。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
     height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon">

<style type="text/css">     
    .st0
    {
        fill:none;
        stroke:#F2F2F2;
        stroke-width:4;
        stroke-miterlimit:10;
    }

    #icon .st0{
        -webkit-transition: .5s;
    }

    #icon:hover .st0{ 
        fill: #ffffff;
        stroke: #1f8a4c;
        cursor: pointer;
    }       
</style>


<g id="container">
    <circle class="st0" cx="101" cy="99" r="89.333"/>
</g>

<g id="icon-details">
    <path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
        l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
    <circle class="st0" cx="77.843" cy="72.434" r="33.331"/>
    <circle class="st0" cx="77.844" cy="72.434" r="22.343"/>
</g>

</svg>

我知道它可以通过 stroke-dasharray 和 stroke-offset + @Keyframes (CSS) 来实现，但是谁能告诉我我们如何实现它？

这是 JSFIDDLE :

Answer 1

fiddle :Click现在您只需使用 dashoffset/dasharray 值。CSS:

body { background: #27ae60; }
#container{

}

#container:hover circle{
animation: dash 2s linear forwards;
 -webkit-animation: dash 2s linear forwards;
}



@keyframes dash {
    0%{     stroke-dashoffset:0;
    stroke-dasharray:0;}
    100% {
     stroke-dashoffset:10;
    stroke-dasharray:180;
    }
}
@-webkit-keyframes dash {
    0%{     stroke-dashoffset:0;
    stroke-dasharray:0;}
    100% {
     stroke-dashoffset:10;
    stroke-dasharray:180;
    }
}