懸停時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>