如何为图案填充添加背景颜色？

Question

如何转换此代码，以便id #wires的路径最初具有颜色#000，然后被模式和关键帧着色为完全没有颜色？所以基本上这颗恒星应该是黑色的，渐变动画会让星星悄然升起。我该如何实现这一目标？

这是受到https://stackoverflow.com/a/42032657/5586359的启发。

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

#waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;
  width: 100%;
  height: 50%;
}

#wires {
  fill: url(#waveGradient);
}

svg {
  width: 100%;
  height: auto;
}

@keyframes fillAction {
  0% {
    transform: translate(0, 50%);
  }
  100% {
    transform: translate(0, -1.6%);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-0%, 0);
  }
  10% {
    transform: translate(-5%, 0);
  }
  20% {
    transform: translate(-10%, 0);
  }
  30% {
    transform: translate(-15%, 0);
  }
  40% {
    transform: translate(-20%, 0);
  }
  50% {
    transform: translate(-15%, 0);
  }
  60% {
    transform: translate(-10%, 0);
  }
  70% {
    transform: translate(-5%, 0)
  }
  100% {
    transform: translate(0%, 0);
  }
}

<div class="banner">
  <?xml version="1.0" standalone="no"?>
  <!-- Generator: Gravit.io -->
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 250 250" width="250" height="250">
    <defs>
      <clipPath id="_clipPath_kDqJpeywA1tWpdDxczhcHinYaTsaw8EY"><rect width="250" height="250"/>
      </clipPath>
      <linearGradient id="gradient">
              <stop offset="0%" stop-color="#333291"/>
              <stop offset="30%" stop-color="purple"/>
              <stop offset="100%" stop-color="#fb5b5d" stop-opacity="100" />
      </linearGradient>
      <pattern id='waveGradient' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
        <g class="fill">
          <path fill="url(#gradient)" 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>
      </pattern>
    </defs>
    <g clip-path="url(#_clipPath_kDqJpeywA1tWpdDxczhcHinYaTsaw8EY)">
      <path id="wires" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
    </g>
  </svg>
</div>

Answer 1

一个想法是复制星星的路径，然后用你想要的颜色填充它。两者都将放在彼此之上，您将拥有您想要的视觉效果

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

#waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: ease-out;
  animation-duration: 0.5s;
  width: 100%;
  height: 50%;
}

#wires {
  fill: url(#waveGradient);
}
#empty {
  fill:#000;
}

svg {
  width: 100%;
  height: auto;
}

@keyframes fillAction {
  0% {
    transform: translate(0, 50%);
  }
  100% {
    transform: translate(0, -1.6%);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-0%, 0);
  }
  10% {
    transform: translate(-5%, 0);
  }
  20% {
    transform: translate(-10%, 0);
  }
  30% {
    transform: translate(-15%, 0);
  }
  40% {
    transform: translate(-20%, 0);
  }
  50% {
    transform: translate(-15%, 0);
  }
  60% {
    transform: translate(-10%, 0);
  }
  70% {
    transform: translate(-5%, 0)
  }
  100% {
    transform: translate(0%, 0);
  }
}

<div class="banner">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 250 250" width="250" height="250">
    <defs>
      <linearGradient id="gradient">
              <stop offset="0%" stop-color="#333291"/>
              <stop offset="30%" stop-color="purple"/>
              <stop offset="100%" stop-color="#fb5b5d" stop-opacity="100" />
      </linearGradient>
      <pattern id='waveGradient' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
        <g class="fill">
          <path fill="url(#gradient)" 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>
      </pattern>
    </defs>
    <g >
      <path id="empty" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
      <path id="wires" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
    </g>
  </svg>
</div>