悬停时SVG圈动画描边

Question

我目前有一个小的SVG，可以增加一个完整的笔画。 但是，我很难在悬停时完成整个循环。 当用户悬停链接时，它应该返回另一个方向。

完整的动画似乎正在工作，但在集成它时，当我只希望它发生时，动画会不断消失。

 body, html { position: relative; height: 100%; } body { background-color: #D81D3B; } .svg-container { position: absolute; top: 50%; left: 50%; width: 7em; height: 7em; transform: translate3d(-50%, -50%, 0); } .svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .symbol { fill: transparent; stroke: #fff; stroke-width: 1px; stroke-dasharray: 1600; stroke-miterlimit: 10; stroke-dashoffset: 1600; animation: dash 4s linear 1; } @keyframes dash { from { stroke-dashoffset: 1600; } to { stroke-dashoffset: -1600; } } 

 <div class="svg-container"> <svg width="100" height="100" class="svg"> <circle cx="50" cy="50" r="40" stroke-width="4" class="symbol" /> </svg> </div> <a href="#">Stupid</a> 

Answer 1

根据您的描述，您实际需要的是transition而不是animation 。 此外，link（ a ）元素当前位于DOM中的svg元素下方，因此不能用于更改SVG元素（或SVG的子元素）的样式。 它需要高于SVG元素（上面意味着链接应该是SVG元素的前一个兄弟或SVG父元素的前一个兄弟）。

另一件事是你实际上不需要从stroke-dashoffset:1600移动到-1600因为它会画圆并立即擦掉它。 我们需要它为stroke-dashoffset:0当悬停在link元素上时stroke-dashoffset:0在悬停时返回原始状态（ stroke-dashoffset: 1600 ）。 转换将自动创建悬停的反向效果，无需单独编码。

以下是一个示例代码段。

 body, html { position: relative; height: 100%; } body { background-color: #D81D3B; } .svg-container { position: absolute; top: 50%; left: 50%; width: 7em; height: 7em; transform: translate3d(-50%, -50%, 0); } .svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .symbol { fill: transparent; stroke: #fff; stroke-width: 1px; stroke-dasharray: 1600; stroke-miterlimit: 10; stroke-dashoffset: 1600; transition: all 4s linear; } a:hover + .svg-container .symbol { stroke-dashoffset: 0; } 

 <a href="#">Stupid</a> <div class="svg-container"> <svg width="100" height="100" class="svg"> <circle cx="50" cy="50" r="40" stroke-width="4" class="symbol" /> </svg> </div> 

---

使用过渡或纯CSS，无法在悬停时使圆圈沿同一方向（顺时针方向）擦除。 它可以通过下面的代码片段中的一些JS来实现。 使用JS时，link元素可以在文档中的任何位置，因为它没有CSS等限制，使用动画将比转换更有效。

（ 注意：非常快速的进入和退出将会破坏动画，因为脚本希望在悬停发生时完成一次迭代。修复此操作将非常棘手和复杂。 ）

 window.onload = function() { var link = document.querySelector('a'); var symbol = document.querySelector('.svg-container .symbol'); /* clockwise paint on hover in */ link.addEventListener('mouseover', function() { symbol.setAttribute('style', 'stroke-dashoffset: 1600; animation: paint 4s linear'); }, false); /* clockwise wipe on hover out */ link.addEventListener('mouseout', function() { symbol.setAttribute('style', 'stroke-dashoffset: 0; animation: wipe 4s linear'); }, false); } 

 body, html { position: relative; height: 100%; } body { background-color: #D81D3B; } .svg-container { position: absolute; top: 50%; left: 50%; width: 7em; height: 7em; transform: translate3d(-50%, -50%, 0); } .svg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .symbol { fill: transparent; stroke: #fff; stroke-width: 1px; stroke-dasharray: 1600; stroke-miterlimit: 10; stroke-dashoffset: 1600; } @keyframes paint { to { stroke-dashoffset: 0; } } @keyframes wipe { to { stroke-dashoffset: -1600; } } 

 <div class="svg-container"> <svg width="100" height="100" class="svg"> <circle cx="50" cy="50" r="40" stroke-width="4" class="symbol" /> </svg> </div> <a href="#">Stupid</a>