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

小提琴：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;
    }
}

Answer 2

更新

:root { background: #27ae60; transition: background .3s ease}

[class=loop]{
    position:relative;
    margin: 240px auto
}
[class=loop], [class=circle]{
    width: 240px;
    height: 240px
}
[class=loop]:before, [class=loop]:after{
    content: '';
    z-index: 1
}
[class=loop]:before, [class=loop]:after,[class=circle]{
    position: absolute;
}
[class=loop]:after,[class=circle]{
    border-radius: 50%
}
[class=loop]:before{
    width: 80px;
    height: 20px;
    border-radius: 10px;
    border: 4px solid green;
    transform: rotateZ(50deg);
    top: 160px;
    left: 114px
}
[class=loop]:after{
    top: 32px;
    left: 32px;
    width: 100px;
    height: 100px;
    border: 10px solid transparent;
    box-shadow: inset 0 0 0 4px green,0 0 0 4px green
}
[class=circle]{
    border: 4px dashed green;
    top: 0px;
    left: 0px;
    background: white;
    z-index: 0;
    background-clip: content-box
}
[class=loop]:hover [class=circle]{
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear
}
@-webkit-keyframes spin {
    to { transform: rotate(360deg); }
}
@-moz-keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

<div class=loop>
    <div class=circle></div>
</div>

单元素解决方案是

:root { background: #27ae60; transition: background .3s ease}
:root:hover { background: red }
div{
    width: 80px;
    height: 20px;
    border-radius: 10px;
    border: 4px solid white;
    transform: rotateZ(45deg);
    margin: 230px auto;
    position: relative
}
div:before,div:after{
    content: '';
    position: absolute;
    border-radius: 50%
}
div:before{
    width: 100px;
    height: 100px;
    border: 10px solid transparent;
    top: -52px;
    left: -124px;
    box-shadow: inset 0 0 0 4px white,0 0 0 4px white
}
div:after{
    width: 250px;
    height: 250px;
    border: 4px dashed white;
    top: -124px;
    left: -154px
}
div:hover:after{
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
@-webkit-keyframes spin {
    to { transform: rotate(360deg); }
}
@-moz-keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

<div/>