SVG注水动画答案

【问题标题】：SVG water fill animationSVG注水动画
【发布时间】：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>

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

【问题讨论】：

波浪完全在水滴之上，如果我将波浪夹在水滴上，那么水滴在上升时会一直看起来是满的。请在此处更清楚地说明您希望看到的内容。
基本上我希望动画填满整个水滴。如该线程的“SVG Deliciousness”部分所示stackoverflow.com/questions/29738787/filling-water-animation/…
你只想要一个向上移动的蓝色水滴，然后没有波浪效果？
我不希望水滴标志移动我只想让水动画填满水滴。

标签： javascript css animation svg fill

【解决方案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 构建的。重新提出您的问题作为对原始问题的评论，她/他也许会给您一些见解！