在SVG中悬停时完成圆的圆周

Question

我想尝试的是在svg标记悬停时完成一个半圈的完成。

<div class="wrapper">
<div class="center">    
  <svg class="center" xmlns="http://www.w3.org/2000/svg">
  <g id="shap">
 <circle class="path-1" cx="65" cy="70" r=63 fill="none" stroke-width="3" stroke="#fff" />
    </g>

  </svg>
</div>
</div>

Answer 1

喜欢吗？

svg #shap{
	stroke-dasharray:200px;
	stroke-dashoffset:0%;
	transition:all 400ms;
}

svg:hover #shap{
	stroke-dasharray:400px;
	stroke-dashoffset:0%;
}

<div class="wrapper">
<div class="center">    
  <svg class="center" xmlns="http://www.w3.org/2000/svg">
  <g id="shap">
 <circle class="path-1" cx="65" cy="70" r=63 fill="none" stroke-width="3" stroke="red" />
    </g>

  </svg>
</div>
</div>