SVG无效，无法在Web上显示

Question

所以我对SVG文件进行了大量编辑，现在我无法在AI中打开它，它不会在网络上显示。我猜这是因为我内部有HTML元素，就像标签一样，但我不知道如何在不破坏其余代码的情况下解决这个问题。

＆＃13;

＆＃13;

 <div>
    <div id="banner">
      <div>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" 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>

<defs>

<style type="text/css">
    .st0 {
      fill: none;
      stroke: #000;
      stroke-width: 4;
      stroke-miterlimit: 5;
    }
    .st1 {
      fill: none;
      stroke: #fff;
      stroke-width: 3;
      stroke-miterlimit: 5;
    }
    #banner {
      border-radius: 50%;
      width: 150px;
      height: 150px;
      background: #fff;
      overflow: hidden;
      backface-visibility: hidden;
      transform: translate3d(0, 0, 0);
    }
    #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>
</defs>

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

 

＆＃13;

＆＃13;

＆＃13;