Question

我已经开始在 SVG 中绘制一个甜甜圈。 ~~出于某种原因，当我为更大的圆圈设置动画时，我的蒙版不起作用。~~（Chrome 版本 90.0.4430.212 上的错误）我只打算为更大的圆圈设置动画，而不是整个 SVG/甜甜圈（我不我不想让较小的圆圈动画我只想要较大的圆圈缩放）。如何使用蒙版为 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>

带有 CSS 和 SVG 蒙版的 SVG 动画

1 个答案: