SVG水填充动画 [英] SVG water fill animation
问题描述
我想要一个擦拭动画看起来像水滴在一滴内。它目前是一个正方形,在下降标志的顶部有一个波浪动画。它正确地完成了波浪动画,但我不能让它留在掉落中并且也填满。
I am to get a wipe animation to look like water is filling up inside of a drop. It currently is a square with a wave animation over top of the drop logo. It does the wave animation correctly but I can't get it to stay inside the drop and also fill up.
我越来越接近但我仍然需要实际的徽标至少在圈内。
I'm getting closer but I still need the actual logo to be inside the circle at least.
我的进步:
<!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 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>
推荐答案
以下内容将您的代码修改为:
The following modifies your code to:
- 删除视口(我发现使用
转换
更容易, - 制作drop和h字母的副本,
- 将副本合并到一个路径中,
- 将路径合并到
< clipPath>
元素在< svg>
中的< defs>
元素内,并为其指定一个ID(drop ) - 在
< g class =fill>周围放置一个封闭的
group,< g>
元素; - 使用drop封闭
< g>
元素的剪辑,以及 - 缩放并将黑边界的drop-and-h以及剪辑路径drop-and-h翻译相同的数量,以便它们以wavehape为中心。
- remove the viewport (I just find it easier to use
transform
), - make a copy of both the drop and the "h" letter,
- merge the copies into a single path,
- place that merged path inside a
<clipPath>
element inside a<defs>
element in the<svg>
and give it an id ("drop") - place an enclosing
<g>
element around the<g class="fill">
group, - clip that enclosing
<g>
element using the "drop", and - scale and translate both the black-bordered drop-and-h as well as the clip path drop-and-h by the same amounts so that they are centered on the waveshape.
您可以阅读 MDN上的clipPath 。
顺便说一下,请注意你的波形动画可能会永远持续下去,即使你不能再看到波浪晃动(虽然我没有严格检查),这可能不是你想要的。
By the way, note that your wave shape animation may continue forever even if you can't see the waves sloshing around any more (though I didn't check this rigorously), which is probably not what you want.
<!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>
这篇关于SVG水填充动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!