SVG水填充動畫
[英]SVG water fill animation
問題描述
我想要一個擦拭動畫看起來像水滴在一滴內。 它目前是一個正方形，在下降標志的頂部有一個波浪動畫。 它正確地完成了波浪動畫，但是我不能讓它留在掉落中並且也填滿了。
我越來越近，但我仍然需要實際的徽標至少在圈內。
我的進步：
<!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>
1 個解決方案
解決方案1
13 2017-02-03 20:39:04
以下內容將您的代碼修改為：
- 刪除視口（我發現使用
transform更容易）， - 制作drop和“h”字母的副本，
- 將副本合並到一個路徑中
- 將路徑合並到
<svg>中的<svg><defs>元素內的<clipPath>元素內，並為其指定一個id（“drop”） - 在
<g class="fill">組周圍放置一個封閉的<g>元素， - 使用“drop”封閉
<g>元素的剪輯，和 - 縮放並將黑邊的drop-and-h以及剪輯路徑drop-and-h翻譯成相同的量，以便它們以wavehape為中心。
您可以在MDN上閱讀有關clipPath的信息 。
順便說一下，請注意你的波形動畫可能會永遠持續下去，即使你看不到波浪再次晃動（雖然我沒有嚴格檢查），這可能不是你想要的。
<!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 水
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.