根据CSS类更改SVG填充动画高度

问题描述 投票：3回答：1

我使用以下SVG和CSS代码来动画SVG形状的填充级别。

.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);
  }
}
<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.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" />

      </g>
        </svg>
    </div>
  </div>
</div>

我想要尝试和失败的是改变“水位”动画的高度。

因此，首选结果是使用CSS类更改动画的高度，因此我可以设置75％或25％填充水平的动画。我试图通过CSS改变高度，但它被忽略了。

javascript html css svg
1个回答
3
投票

通过修改播放的动画，您可以更改它将提升的级别。通过添加额外的课程来更改播放的动画，您可以决定要播放哪一个。

我修改波浪动画停止因为它让我晕船了。

关键点：

我通过添加一个需要与fill类一起使用的额外类来更改动画样式。这将使您能够选择要用于哪个类的动画。

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

然后我更改了相关关键帧的动画平移高度。您也可以使用计算方法calc(155px / 100 * 25)来计算自定义百分比。

@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 115px);
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 85px);
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 45px);
  }
}


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

.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: 10;
  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);
  }
}

hr {
margin-top:50px;
}
@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 115px);
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 85px);
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, 45px);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
<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.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 fill-25">
          <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" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <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.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 fill-50">
          <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" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <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.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 fill-75">
          <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" />

      </g>
        </svg>
    </div>
  </div>
</div>

与calc方法一起使用

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

.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
}

.fill.fill-25 {
    animation-name: fillAction25;
}
.fill.fill-50 {
    animation-name: fillAction50;
}
.fill.fill-75 {
    animation-name: fillAction75;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: 10;
  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);
  }
}

hr {
margin-top:50px;
}
@keyframes fillAction25 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 25));
  }
}
@keyframes fillAction50 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 50));
  }
}
@keyframes fillAction75 {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, calc(155px / 100 * 75));
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
<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.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 fill-25">
          <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" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <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.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 fill-50">
          <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" />

      </g>
        </svg>
    </div>
  </div>
  <hr>
  <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.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 fill-75">
          <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" />

      </g>
        </svg>
    </div>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.