SVG注水动画
Posted
技术标签:
【中文标题】SVG注水动画【英文标题】：SVG water fill animation 【发布时间】：2017-06-20 04:59:17 【问题描述】：我要制作一个擦拭动画，让它看起来像水在水滴中充满。它目前是一个正方形，在水滴标志的顶部有一个波浪动画。它正确地制作了波浪动画，但我无法让它留在水滴内并填满。
我越来越近了，但我仍然需要至少将实际徽标放在圆圈内。
我的进步：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Line Animation Demo</title>
</head>
<body>
<style>
.st0fill:none;stroke:#000000;stroke-width:4;stroke-miterlimit:5;
.st1fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:5;
#logo2
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
#banner
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
#banner .fill
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
#banner #waveShape
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width:300px;
height: 150px;
fill: #04ACFF;
@keyframes fillAction
0%
transform: translate(0, 150px);
100%
transform: translate(0, -5px);
@keyframes waveAction
0%
transform: translate(-150px, 0);
100%
transform: translate(0, 0);
</style>
<div>
<div id="banner">
<div class="fill">
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</svg>
</div>
</div>
<svg version="1.1" id="logo2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z"/>
<g><path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z"/></g>
</svg>
</div>
</body>
</html>【问题讨论】：
波浪完全在水滴之上，如果我将波浪夹在水滴上，那么水滴在上升时会一直看起来是满的。请在此处更清楚地说明您希望看到的内容。 基本上我希望动画填满整个水滴。如该线程的“SVG Deliciousness”部分所示***.com/questions/29738787/filling-water-animation/… 你只想要一个向上移动的蓝色水滴，然后没有波浪效果？ 我不希望水滴标志移动我只想让水动画填满水滴。 【参考方案1】：以下将您的代码修改为：
移除视口（我只是觉得更容易使用transform），
复制 drop 和“h”字母，
将副本合并到一个路径中，
将合并后的路径放置在 <clipPath> 元素内的 <defs> 元素内 <svg> 并给它一个 id（“drop”）
在<g class="fill"> 组周围放置一个封闭的<g> 元素，
使用“drop”剪辑包含<g> 的元素，然后
将黑色边框的 drop-and-h 以及剪辑路径 drop-and-h 缩放和平移相同的量，使它们位于波形的中心。
你可以阅读clipPath on MDN。
顺便说一句，请注意，即使您再也看不到波浪在四处晃动（尽管我没有严格检查），您的波形动画也可能会永远持续下去，这可能不是您想要的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Line Animation Demo</title>
</head>
<body>
<style>
.st0
fill: none;
stroke: #000000;
stroke-width: 4;
stroke-miterlimit: 5;
.st1
fill: none;
stroke: #000000;
stroke-width: 3;
stroke-miterlimit: 5;
#logo2
width: 150px !important;
height: 150px !important;
position: relative;
margin-top: -100px;
#banner
border-radius: 50%;
width: 150px;
height: 150px;
background: #fff;
overflow: hidden;
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
z-index: -1;
margin-bottom: -50px;
#banner .fill
animation-name: fillAction;
animation-iteration-count: 1;
animation-timing-function: cubic-bezier(.2, .6, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
#banner #waveShape
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 0.5s;
width: 300px;
height: 150px;
fill: #04ACFF;
@keyframes fillAction
0%
transform: translate(0, 150px);
100%
transform: translate(0, -5px);
@keyframes waveAction
0%
transform: translate(-150px, 0);
100%
transform: translate(0, 0);
</style>
<div>
<div id="banner">
<div>
<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
<defs>
<clipPath id="drop">
<path transform="scale(0.75), translate(32,0)" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</clipPath>
</defs>
<g clip-path="url(#drop)">
<g class="fill">
<path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
</g>
</g>
<g transform="scale(0.75), translate(32,0)">
<path class="st0" d="M68.2,6.7c0,0-62.4,70.9-62.4,124.7c0,32.3,28,58.4,62.4,58.4s62.4-26.2,62.4-58.4
C130.7,77.6,68.3,6.7,68.2,6.7z" />
<path class="st1" d="M61,77.5c0.8,0,1.5,0.7,1.5,1.5v20.6c2.7-3.6,7.6-5.7,13.1-5.7c12.2,0,19.4,6.9,19.4,18.7v37.2
c0,0.8-0.7,1.5-1.5,1.5H75.6c-0.8,0-1.5-0.7-1.4-1.5v-32c0-4.1-1.8-6.4-5-6.4c-5.8,0-6.7,5.7-6.7,5.7v32.7c0,0.8-0.7,1.5-1.5,1.5
H43.1c-0.8,0-1.5-0.7-1.5-1.5V79c0-0.8,0.7-1.5,1.5-1.5H61z" />
</g>
</svg>
</div>
</div>
</div>
</body>
</html>【讨论】：
我永远欠你的债。谢谢。 你是如何让波浪变得如此平滑的？我的是波涛汹涌 波浪与我的努力无关……它是由 OP 构建的。重新提出您的问题作为对原始问题的评论，她/他也许会给您一些见解！以上是关于SVG注水动画的主要内容，如果未能解决你的问题，请参考以下文章