SVG clipping mask not working as expected with CSS animation

Question

I'm trying yo use a CSS Transform animation that is not working quite well. This is my code snippet:

@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;
}

<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>

The path moves with the applied animation but it gets cut and looks like this:

Cutted

When instead it should look more like this (taken from Illustrator) enter image description here

Paul LeBeau · Accepted Answer · 2017-04-16 07:39:10Z

Clip paths attached to an element get transformed along with the element.

What you need to do is move the clip path to a parent <g>. Then it will not be affected.

@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;
}

<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>

I didn't know that you could have that kind of nesting. I think I need to learn a bit more about SVG. You saved me Paul!

Collectives™ on Stack Overflow

SVG clipping mask not working as expected with CSS animation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related