javascript - 悬停时的 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。此外，链接 (a) 元素当前位于 DOM 中的 svg 元素下方，因此它不能用于更改 SVG 元素(或 SVG 的 children )。它需要在 SVG 元素之上(在上面意味着链接应该是 SVG 元素的前一个兄弟元素或 SVG 父元素的前一个兄弟元素)。

另一件事是您实际上不需要从 stroke-dashoffset:1600 移动到 -1600 因为它会绘制圆圈并立即将其删除。我们需要它在悬停在链接元素上时为 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 时，链接元素可以在文档中的任何位置，因为它没有像 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>