SVG剪贴蒙版不能按预期的方式与CSS动画一起工作

Question

我想要使用不太适用的CSS变形动画。 这是我的代码片段：

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

的路径与所施加的动画移动，但它会在中间，看起来像这样：

当而是应该看更多喜欢（取自Illustrator）

Answer 1

附加到元素的剪辑路径会与元素一起转换。

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

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