在 SVG 形状和 clipPath 上使用变换动画的问题

Question

我创建了一个 SVG 图像，其中有两个形状：一座山和一个月亮，我想对其进行动画处理，使其看起来像是月亮从山后升起。然而，SVG 需要显示透明，所以我创建了另一个山形作为月亮的剪辑路径。

月亮被剪裁得很好，但问题是一旦动画发生，月亮被剪裁的部分会随之移动，所以它最终看起来像一个部分的月亮。这是一个 JSfiddle 来显示正在发生的事情：

SVG代码：

<svg>
  <defs>
    <clipPath id="myClip">
      <path id="mountain-mask" class="st0" d="M0,0v90h94.9V0H0z M84.7,53.8H0.5v-3.2l18-26.9l4.9,8L41.3,0.9l13.3,22.7l7-13.1l23,40.2
V53.8z"/>

    </clipPath>
 </defs>

<path id="moon" clip-path="url(#myClip)" d="M25,24.1c-0.1-0.2-0.3-0.3-0.5-0.3c-2.9,0-5.3,2.4-5.3,5.3c0,2.9,2.4,5.3,5.3,5.3c0,0,0,0,0,0
c0.3,0,0.5-0.2,0.5-0.5c0-0.2-0.1-0.3-0.2-0.4c-0.4-0.4-2-2.2-2-4.3c0-2.4,2.1-4.4,2.1-4.4C25,24.5,25.1,24.3,25,24.1z M21.8,29.1
c0,1.7,0.8,3.2,1.5,4.1c-1.8-0.5-3-2.2-3-4.1c0-1.9,1.3-3.6,3-4.1C22.6,25.9,21.8,27.4,21.8,29.1z"/>

<path id="mountain" d="M15.4,35.7C15.4,35.7,15.4,35.7,15.4,35.7c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0h0c0,0,0,0,0,0
c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.1,1.5l-8.1,14.3c-0.2,0.3-0.1,0.6,0.2,0.8c0.1,0,0.2,0.1,0.3,0.1c0,0,0,0,0,0
c0,0,0,0,0,0c0.1,0,0.1,0,0.2-0.1c0,0,0,0,0.1,0c0.1,0,0.1-0.1,0.2-0.2l18.9-33.2l2.8,1.9c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1
c0,0,0,0,0,0h0c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.4-1.8l2.4,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1
c0,0,0,0,0,0c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0c0,0,0,0,0.1,0l2.5-1.8l4,7c0,0,0,0,0,0L69,50.3c0.1,0.2,0.3,0.3,0.5,0.3
c0.1,0,0.2,0,0.3-0.1c0.3-0.2,0.4-0.5,0.2-0.8l-14.8-26l1-1.9l2.8,1.8c0,0,0,0,0,0c0.1,0.1,0.2,0.1,0.3,0.1c0,0,0,0,0,0c0,0,0,0,0,0
c0,0,0,0,0,0c0.1,0,0.2,0,0.3-0.1c0,0,0,0,0,0l2.7-1.8l2.5,1.8c0,0,0,0,0.1,0c0,0,0,0,0.1,0c0.1,0,0.2,0.1,0.2,0.1h0
c0.1,0,0.2,0,0.2-0.1c0,0,0,0,0.1,0s0,0,0.1,0l2.3-1.7l16.3,28.3c0.2,0.3,0.5,0.4,0.8,0.2c0.3-0.2,0.4-0.5,0.2-0.8l-23.1-40
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-5.6,10.9c0,0,0,0-0.1,0.1c0,0.1-0.1,0.2-0.1,0.2l-0.8,1.6L50.8,16
c0,0,0-0.1,0-0.1c0,0,0,0,0,0L41.9,0.3c-0.2-0.4-0.8-0.4-1,0L32,15.9c0,0,0,0,0,0c0,0,0,0.1,0,0.1l-8.4,14.7l-4.5-7.5
c-0.1-0.2-0.3-0.3-0.5-0.3c-0.2,0-0.4,0.1-0.5,0.3l-18,26.5C-0.1,50,0,50.3,0.3,50.5c0.3,0.2,0.6,0.1,0.8-0.2l11.3-16.6L15.4,35.7z
 M61.7,11.2l5.6,9.7l-2.1,1.5l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0
c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8l-2.6-1.7L61.7,11.2z M41.4,1.8l8.1,14.3l-2.3,1.6l-2.4-1.8c0,0,0,0,0,0
c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0.1c0,0,0,0,0,0l-2.4,1.8
l-2.4-1.8c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0c0,0,0,0,0,0c-0.1,0-0.1,0-0.2,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1
c0,0,0,0,0,0l-2.8,1.8L33.2,16L41.4,1.8z M18.5,24.6l4.4,7.2l-1.4,2.5l-2.3-1.7c0,0,0,0,0,0c0,0-0.1,0-0.1-0.1c0,0-0.1,0-0.1,0
c0,0-0.1,0-0.1,0c0,0-0.1,0-0.1,0c0,0,0,0-0.1,0c-0.1,0-0.1,0-0.2,0.1c0,0,0,0,0,0l-2.8,1.8L13,32.7L18.5,24.6z"/>
</svg>

CSS:

@keyframes rise {
  0% {
    transform: translateY(-20px);
  }

  50% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-20px);
  }
}

#moon {
  animation: rise 3s ease-in-out infinite;
}

Answer 1

将月亮放入一个组中，剪辑该组并像以前一样为月亮设置动画：

<g clip-path="url(#myClip)">
    <path id="moon" d="..." />
</g>

在 SVG 形状和 clipPath 上使用变换动画的问题

Issue using transform animations on SVG shape and clipPath

svg

css-animations

css-transforms

clip-path