SVG剪贴蒙版与CSS动画

Question

我正在尝试使用效果不佳的CSS变换动画。 这是我的代码段：

＆＃13;

＆＃13;

@keyframes waterAnim {
  0% {
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -ms-transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
}

#Water {
  animation: waterAnim 2s ease-out infinite;
}

＆＃13;

<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="200 350 549 144">
  <style>
    .st0{clip-path:url(#SVGID_2_);fill:#54A4DE;}
  </style>
  <g id="Layer2_2">
    <clipPath id="SVGID_2_">
      <path id="SVGID_1_" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44z"/>
    </clipPath>
    <path id="Water" class="st0" d="M490.31 450.95H418.3V411.4s6.67-1.57 8.94-1.57c2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 6.77 1.57 9.07 1.57 2.27 0 6.67-1.57 8.93-1.57 2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 9.07 1.57 9.07 1.57v39.55z"/>
    <path id="DropOutline" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44zm-12.78 18.58c-2.8.47-5.86.44-8.63-.16-10.86-2.35-14.92-11.7-9.53-21.48.94-1.71 2.11-3.28 3.17-4.92l11.73-18.26c3.57 6.25 7.38 12.8 11.06 19.43 1.23 2.21 2.36 4.53 3.14 6.93 2.8 8.66-2.04 16.96-10.94 18.46z"/>
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;

路径随着应用的动画一起移动，但它会被切割，如下所示：

相反它应该看起来更像这样（取自Illustrator）

Answer 1

附加到元素的剪辑路径随元素一起变换。

您需要做的是将剪辑路径移动到父<g>。然后它不会受到影响。

＆＃13;

＆＃13;

@keyframes waterAnim {
  0% {
    -ms-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
  100% {
    -ms-transform: translate(0, -50px);
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
  }
}

#Water {
  animation: waterAnim 2s ease-out infinite;
}

＆＃13;

<svg id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="200 350 549 144">
  <style>
    .st0{clip-path:url(#SVGID_2_);fill:#54A4DE;}
  </style>
  <g id="Layer2_2">
    <clipPath id="SVGID_2_">
      <path id="SVGID_1_" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44z"/>
    </clipPath>
    <g class="st0">
      <path id="Water" d="M490.31 450.95H418.3V411.4s6.67-1.57 8.94-1.57c2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 6.77 1.57 9.07 1.57 2.27 0 6.67-1.57 8.93-1.57 2.3 0 6.76 1.57 9.06 1.57 2.27 0 6.67-1.57 8.94-1.57 2.3 0 9.07 1.57 9.07 1.57v39.55z"/>
    </g>
    <path id="DropOutline" d="M489.55 390.92c-.87-2.65-2.14-5.22-3.51-7.66-4.12-7.33-8.39-14.57-12.39-21.49-4.24 6.53-8.69 13.37-13.14 20.2-1.18 1.82-2.5 3.56-3.55 5.45-6.03 10.83-1.48 21.16 10.68 23.76 3.1.67 6.53.7 9.66.18 9.96-1.65 15.39-10.83 12.25-20.44zm-12.78 18.58c-2.8.47-5.86.44-8.63-.16-10.86-2.35-14.92-11.7-9.53-21.48.94-1.71 2.11-3.28 3.17-4.92l11.73-18.26c3.57 6.25 7.38 12.8 11.06 19.43 1.23 2.21 2.36 4.53 3.14 6.93 2.8 8.66-2.04 16.96-10.94 18.46z"/>
  </g>
</svg>

＆＃13;

＆＃13;

＆＃13;