animation - 部分 SVG 在悬停时的动画变化

Question

此处包含 svg 文件的图像（无法上传 svg 文件）

我想将鼠标悬停在上面，并以动画的形式仅将圆圈的背景（从内圈到边缘）更改为蓝色。

如果动画是一种从圆圈中间向外摆动的效果，那就更好了。如果它是一种“随机”的外观，蓝色的摇摆效果，那就太好了。重要的是它从圆圈的中间开始动画，直到整个圆圈都是蓝色的。当鼠标/悬停被移除时，动画是向后的。

这在 svg/css 领域是否可行，有人可以指出正确的方向吗？

Answer 1

这是一种略显老套的方法，使用带有黑色笔触的蓝色圆圈，开始时如此粗壮以至于填满了内部。将鼠标悬停在圆圈上会导致笔划缩小到零。

.logo-background {
    fill: blue;
    stroke: black;
    stroke-width: 200;
    transition: stroke-width 500ms;
}
.logo-background:hover {
    stroke-width: 0;
}
.logo {
  fill: none;
  stroke: white;
  stroke-width: 5;
  pointer-events: none;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" height="100px">
  <defs>
    <clipPath id="circle-clip">
      <circle cx="100" cy="100" r="100" />
    </clipPath>
  </defs>

  <circle class="logo-background" cx="100" cy="100" r="100" clip-path="url(#circle-clip)" />
  <rect class="logo" x="60" y="60" width="80" height="80" rx="5" ry="5"/>
</svg>