带有 CSS 和 SVG 蒙版的 SVG 动画

Question

我已经开始用 SVG 画一个甜甜圈。 由于某种原因，当我为更大的圆圈设置动画时，我的面具不起作用。（Chrome 版本 90.0.4430.212 上的错误）我只打算为更大的圆圈而不是整个 SVG/Doughnut 设置动画（我没有不希望较小的圆圈进行动画处理，我只希望较大的圆圈进行缩放）。如何使用蒙版为 SVG 元素设置动画？

https://codepen.io/markkkkkkk/pen/oNZWOOx

#myCircle {
  animation-name: scaleKeyframe;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  transform-origin: 5px 5px;
  animation-play-state: paused;
}

svg:hover #myCircle {
  animation-play-state: running;
}

@keyframes scaleKeyframe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.1);
  }
}

<svg viewBox="0 0 40 10">
  <mask id="myMask">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="5" cy="5" r="2" fill="black" />
  </mask>
  <circle id="myCircle" cx="5" cy="5" r="4" mask="url(#myMask)" />
</svg>

Answer 1

我仍然希望得到关于仅动画元素并保持蒙版稳定的答案。

只需将您的圈子包裹在 <g> 元素中，然后将掩码应用于该元素。

<g mask="url(#myMask)">
  <circle id="myCircle" cx="5" cy="5" r="4" />
</g>

不幸的是，该错误也影响了这一点。 已在 Chrome 91.0.4472.77 中修复

#myCircle {
  animation-name: scaleKeyframe;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-play-state: paused;
  transform-origin: 5px 5px;
}

svg:hover #myCircle {
  animation-play-state: running;
}

@keyframes scaleKeyframe {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.1);
  }
}

<svg viewBox="0 0 40 10">
  <mask id="myMask">
    <rect width="100%" height="100%" fill="white" />
    <circle cx="5" cy="5" r="2" fill="black" />
  </mask>
  <g mask="url(#myMask)">
    <circle id="myCircle" cx="5" cy="5" r="4" />
  </g>
</svg>