部分 SVG 在悬停时改变动画

Question

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

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

如果动画是从圆圈中间向外摇摆的效果就更好了。如果看起来有点 "random" 就不错了，蓝色的摇摆效果。重要的是，它是从圆圈中间开始动画，向边缘移动，直到整个圆圈变成蓝色。当 mouse/hover 被移除时，动画是倒退的。

这在 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>

部分 SVG 在悬停时改变动画

Part of SVG changing in animation on hover

animation

svg

css-animations

svg-animate

svg-animationelements