部分 SVG 在悬停时的动画变化答案

【问题标题】：Part of SVG changing in animation on hover部分 SVG 在悬停时的动画变化
【发布时间】：2020-05-23 15:29:47
【问题描述】：

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

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

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

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

【问题讨论】：

你能添加一个 sn-p 或 fiddle 来重现这个问题吗？
@mamounothman 一个人需要在问题内发布minimal reproducible example，而不是任何第三方网站。
这不是问题，这是一个问题，如果这甚至可能，如果是，他们怎么可能？

标签： animation svg css-animations svg-animate svg-animationelements

【解决方案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>

【讨论】：