Question

问题

所以我今天早上发布了this个问题；最终决定使用SVG并填充它是最佳选择。我一生中从未尝试过使用CSS填充SVG，任何指导都将不胜感激。

因此，目前，我对SVG具有填充效果。现在，我假设我需要某种形式的裁剪，以便填充SVG保持在我要填充的SVG的边界内。现在，我尝试应用剪切路径，但似乎不起作用。

代码

SVG的定义如下：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.144 513.144" style="enable-background:new 0 0 513.144 513.144;" xml:space="preserve" width="512" height="512">
<g>
    <path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823   c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769   c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921   c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142   c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217   c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183   c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214   c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495   c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37   c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088   c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921   c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25   c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243   c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319   c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2   c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356   c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787   c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786   c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152   c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467   c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827   c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197   c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684   c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815   S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842   c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067   c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442   C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602   c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518   c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496   C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397   c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127   C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404   c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148   C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978   c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196   c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
</g>
</svg>

CSS和HTML如下：

#banner {
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  posiiton: relative;
  &::before {
    font-size: 100px;
    color: rgba(green, 0.5);
  }
}

#banner .fill {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: -1;
  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;
  fill: #04ACFF;
}

@keyframes fillAction {
  0% {
    top: 100%;
  }
  100% {
    top: 0;
  }
}

@keyframes waveAction {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div id="banner">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.144 513.144" style="enable-background:new 0 0 513.144 513.144;" xml:space="preserve" width="512" height="512">
    <g>
      <path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823   c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769   c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921   c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142   c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217   c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183   c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214   c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495   c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37   c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088   c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921   c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25   c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243   c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319   c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2   c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356   c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787   c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786   c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152   c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467   c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827   c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197   c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684   c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815   S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842   c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067   c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442   C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602   c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518   c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496   C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397   c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127   C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404   c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148   C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978   c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196   c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
    </g>
  </svg>
  <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <clipPath id="clipPath">
          <path d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823   c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769   c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921   c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142   c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217   c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183   c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214   c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495   c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37   c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088   c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921   c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25   c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243   c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319   c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2   c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356   c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787   c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786   c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152   c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467   c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827   c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197   c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684   c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815   S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842   c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067   c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442   C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602   c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518   c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496   C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397   c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127   C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404   c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148   C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978   c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196   c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
      </clipPath>
      <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>

Answer 1

您的示例可以简化很多。下面是一个有效的示例，仅使用SVG，没有任何重叠的HTML元素。

这里有两点要注意：

waveShape和图标设计为不同的大小。 waveShape为300x300，但图标为512x512。因此，我必须将图标缩小（300/512）或0.586，以使大小匹配。这就是在图标路径上使用transform="scale(0.586, 0.586)"的原因。
我怀疑您想填充图标的中心，而不仅仅是边缘。不幸的是，您选择的图标的设计使其填充仅是边缘。要解决此问题，您需要在此处用图标的实心版本（“ fas”）中的图标路径替换图标路径。

#banner .fill {
  width: 400px;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
  fill: #04ACFF;
}

@keyframes waveAction {
  0% {
    transform: translate(0, 300px);
  }
  100% {
    transform: translate(0, 0);
  }
}

<div id="banner">
  <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300">
      <clipPath id="clipPath">
          <path transform="scale(0.586,0.586)"
                d="M500.644,369.495c-3.093-1.42-76.317-34.787-126.364-34.787c-4.688,0-9.531,0.292-14.463,0.823   c13.329-8.636,24.433-17.37,33.209-26.146c18.14-18.14,36.918-47.025,55.811-85.853c13.962-28.692,22.563-51.799,22.922-52.769   c1.018-2.748,0.342-5.837-1.729-7.909c-2.073-2.073-5.162-2.747-7.909-1.729c-0.97,0.359-24.077,8.96-52.77,22.921   c-38.828,18.893-67.713,37.67-85.854,55.811c-5.668,5.668-11.319,12.305-16.937,19.886c6.158-24.56,9.288-46.367,9.288-65.142   c0-22.32-4.491-50.011-13.35-82.306c-1.095-3.994-5.224-6.345-9.216-5.249c-3.995,1.096-6.345,5.222-5.249,9.217   c8.503,31.002,12.814,57.358,12.814,78.338c0,41.177-16.639,92.535-30.909,129.011c-5.493,11.841-9.995,22.644-13.366,31.183   c-3.371-8.537-7.872-19.338-13.364-31.177c-14.271-36.476-30.911-87.838-30.911-129.017c0-55.677,30.372-134.866,44.283-168.214   c5.44,13.016,13.389,33.002,21.021,55.778c1.316,3.927,5.567,6.042,9.494,4.728c3.928-1.316,6.045-5.567,4.729-9.495   c-13.62-40.642-28.289-72.709-28.436-73.028C262.165,1.707,259.503,0,256.572,0s-5.593,1.707-6.815,4.37   c-0.131,0.285-13.247,28.95-26.161,66.345c-17.451,50.528-26.299,92.209-26.299,123.887c0,20.521,3.752,43.063,9.248,65.088   c-5.605-7.558-11.242-14.177-16.897-19.832c-18.141-18.14-47.025-36.917-85.854-55.811c-28.692-13.961-51.8-22.562-52.77-22.921   c-2.747-1.018-5.836-0.343-7.909,1.729c-2.071,2.072-2.747,5.161-1.729,7.909c0.56,1.512,13.96,37.474,34.46,75.25   c1.975,3.64,6.526,4.99,10.169,3.015c3.641-1.976,4.99-6.528,3.015-10.169c-11.783-21.714-21.306-43.201-27.16-57.243   c28.297,11.815,86.886,38.563,117.17,68.847c20.043,20.043,37.397,51.371,49.865,78.049c5.261,13.454,10.223,24.931,14.006,33.319   c-8.893-3.827-20.63-8.553-33.701-12.985c-26.772-12.483-58.331-29.914-78.484-50.067c-7.079-7.079-14.461-16.23-21.941-27.2   c-2.335-3.423-6.999-4.306-10.422-1.971c-3.422,2.333-4.305,7-1.971,10.421c8.005,11.741,15.988,21.617,23.727,29.356   c8.776,8.776,19.88,17.51,33.209,26.146c-4.932-0.531-9.775-0.823-14.463-0.823c-50.047,0-123.271,33.366-126.364,34.787   c-2.663,1.223-4.37,3.885-4.37,6.815s1.707,5.592,4.37,6.815c3.093,1.42,76.317,34.786,126.364,34.786   c10.366,0,21.493-1.431,32.65-3.711c-0.588,0.558-1.17,1.118-1.735,1.684c-27.14,27.141-48.671,84.715-49.574,87.152   c-1.018,2.748-0.342,5.837,1.729,7.909c1.433,1.432,3.35,2.197,5.305,2.197c0.874,0,1.756-0.153,2.604-0.467   c2.438-0.903,60.013-22.434,87.152-49.574c17.615-17.615,31.65-46.792,39.576-65.827c7.926,19.035,21.96,48.212,39.574,65.827   c27.141,27.141,84.715,48.671,87.153,49.574c0.849,0.314,1.729,0.467,2.604,0.467c1.954,0,3.872-0.765,5.305-2.197   c2.071-2.072,2.747-5.161,1.729-7.909c-0.902-2.438-22.434-60.012-49.573-87.152c-0.565-0.565-1.147-1.126-1.736-1.684   c11.157,2.28,22.285,3.711,32.651,3.711c50.047,0,123.271-33.366,126.364-34.786c2.663-1.223,4.37-3.885,4.37-6.815   S503.307,370.718,500.644,369.495z M334.104,250.463c30.281-30.282,88.858-57.025,117.157-68.842   c-11.816,28.299-38.56,86.876-68.843,117.158c-20.153,20.153-51.712,37.585-78.484,50.067   c-13.084,4.437-24.833,9.168-33.729,12.997c3.674-8.175,8.482-19.328,13.62-32.442   C296.323,302.533,313.836,270.731,334.104,250.463z M138.864,402.912c-33.346,0-79.849-16.828-104.044-26.602   c24.195-9.774,70.698-26.602,104.044-26.602c20.161,0,44.137,6.168,64.923,13.196c12.005,5.571,22.949,10.126,31.551,13.518   c-6.154,2.568-13.344,5.766-20.853,9.512C191.612,394.369,162.594,402.912,138.864,402.912z M206.391,452.496   C206.39,452.496,206.39,452.496,206.391,452.496c-16.419,16.419-46.659,31.208-65.404,39.397   c8.183-18.739,22.963-48.964,39.4-65.401c10.28-10.28,25.504-19.427,39.822-26.618c8.688-3.214,16.471-6.401,22.803-9.127   C235.599,408.639,222.379,436.508,206.391,452.496z M332.757,426.492c16.419,16.419,31.209,46.659,39.397,65.404   c-18.738-8.182-48.964-22.963-65.4-39.4c-15.964-15.964-29.193-43.845-36.614-61.746c6.346,2.733,14.15,5.927,22.862,9.148   C307.293,407.081,322.48,416.215,332.757,426.492z M374.279,402.912c-23.729,0-52.747-8.543-75.62-16.978   c-7.509-3.746-14.699-6.944-20.853-9.512c8.602-3.391,19.546-7.946,31.55-13.518c20.785-7.028,44.762-13.196,64.923-13.196   c33.349,0,79.854,16.83,104.048,26.604C454.141,386.086,407.655,402.912,374.279,402.912z"/>
      </clipPath>
      <g clip-path="url(#clipPath)">
        <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>
    </svg>
  </div>
</div>

SVG剪贴蒙版无法正常工作

问题

代码

1 个答案: