代码之家 › 专栏 › 技术社区 › indar

在SVG中完成悬停圆的周长

svg html5 css

0

indar · 技术社区 · 6 年前

我要做的是在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>

1 回复 | 直到 6 年前

1

Teobis 6 年前

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>