SVG clipping mask not working as expected with CSS animation
Joe
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:
When instead it should look more like this (taken from Illustrator) 
Paul LeBeau
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
edited at
- Prev: Terraform provision private VM on Azure
- Next: MySQL Full Join with Where clause giving incorrect results
Related
TOP Ranking
- 1
Failed to listen on localhost:8000 (reason: Cannot assign requested address)
- 2
pump.io port in URL
- 3
How to import an asset in swift using Bundle.main.path() in a react-native native module
- 4
Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)
- 5
Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext
- 6
BigQuery - concatenate ignoring NULL
- 7
Spring Boot JPA PostgreSQL Web App - Internal Authentication Error
- 8
ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements
- 9
ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3
- 10
How to remove the extra space from right in a webview?
- 11
Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd
- 12
Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');
- 13
maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class
- 14
java.lang.NullPointerException: Cannot read the array length because "<local3>" is null
- 15
How to use merge windows unallocated space into Ubuntu using GParted?
- 16
flutter: dropdown item programmatically unselect problem
- 17
Pandas - check if dataframe has negative value in any column
- 18
Nuget add packages gives access denied errors
- 19
Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background
- 20
Generate random UUIDv4 with Elm
- 21
Client secret not provided in request error with Keycloak
Comments