SVG旋转虚线圆形边框上悬停

Question

我想创建一个SVG悬停动画效果使用CSS。

我想要做的是，当我将鼠标悬停在我的图标上时，实心圆形容器将以虚线容器旋转。见下图。

检查什么我迄今所做的：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> 

据我所知，它可以与获得中风dasharray和中风偏移+ @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

UPDATE

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