svg: iframe 无法删除！为什么？

Question

我正在尝试在 svg 中设置动画图标。我在一个教程网站上获得了代码...一切正常，除了当我尝试删除 HTML 代码（唯一的一个）中的 iframe 时，动画停止工作。为什么？

我把代码放在 zip file 里了。如果有人能帮助我，那就太好了！

编辑：

HTML :

<!DOCTYPE html>
<html lang="en" style="">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="js/vendor/jquery.svginject.js"></script>
        <script src="js/site.js"></script>
    </head>
    <body style="background-color:#ffffff">
        <img src="img/audio-spectrum-analyzer.svg" data-audiofile="fondspacial.mp3"  width="18" class="svg-inject">           
    </body>
</html>
<iframe style="display:none" frameborder="0" height="0" width="0" src="nothing.html"></iframe>

SVG（图像）：

<svg id="audio-spectrum-analyzer" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="320px" width="210px" version="1.1" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 210 320" onclick="toggleAudio()">
  <g id="eq-bars" height="320px" width="210px" fill="#010101" transform="">
    <rect x="00" y="150" height="20" width="10" />
    <rect x="20" y="140" height="40" width="10"  />
    <rect x="40" y="100" height="120" width="10"  />
    <rect x="60" y="120" height="80" width="10"  />
    <rect x="80" y="60" height="200" width="10"  />
    <rect x="100" y="20" height="280" width="10"  />
    <rect x="120" y="70" height="180" width="10"  />
    <rect x="140" y="120" height="80" width="10"  />
    <rect x="160" y="140" height="40" width="10"  />
    <rect x="180" y="150" height="20" width="10"  />
    <rect x="200" y="155" height="10" width="10"  />
  </g>

  <defs>
    <style type="text/css"><![CDATA[
      svg#audio-spectrum-analyzer {
        margin: 0 auto;
      }
    ]]></style>
  </defs>

  <script type="application/javascript"><![CDATA[
    var context;
    if (typeof AudioContext !== "undefined") {
      context = new AudioContext();
    }
    else if (typeof webkitAudioContext !== "undefined") {
      context = new webkitAudioContext();
    }
    else {
      throw new Error('AudioContext not supported. :(');
    }

    var eqHeight = document.querySelector('svg#audio-spectrum-analyzer > g#eq-bars').getAttribute('height').replace('px', '');
    var bars = document.querySelectorAll('svg#audio-spectrum-analyzer rect');

    var playing = false;

    var audioFileUrl = document.querySelector('svg#audio-spectrum-analyzer').getAttribute('data-audiofile');
    if (audioFileUrl === undefined) {
      throw new Error('Audio File not defined');
    }

    var soundSource;
    var fft;
    var fftSmoothing = 0.6;
    var fftMaxValue = 256;
    var samples = 128;
    var sampleIntervalID;
    var ampFactor = 1.25;
    var numBars = bars.length;
    var soundBuffer;


    var request = new XMLHttpRequest();
    request.open("GET", audioFileUrl, true);
    request.responseType = "arraybuffer";

    // Our asynchronous callback
    request.onload = function () {
      var audioData = request.response;

      // The Audio Context handles creating source
      // buffers from raw binary data
      soundBuffer = context.createBuffer(audioData, true /*make mono*/ );
    };
    request.send();

    function sampleAudio() {
      var data = new Uint8Array(fft.frequencyBinCount);
      fft.getByteFrequencyData(data);

      // Calc bin size to sum freqs into.
      // Carve off some of the high-end, lower energy bars (+2)
      var bin_size = Math.floor(data.length / (numBars + 2));

      // Sum up and average the samples into their bins
      for (var i = 0; i < numBars; ++i) {

        // Sum this bin
        var sum = 0;
        for (var j = 0; j < bin_size; ++j) {
          sum += data[(i * bin_size) + j];
        }

        // Duck some of the low-end power
        if (i === 0) {
          sum = sum * 0.75;
        }

        // Calculate the average frequency of the samples in the bin
        var average = sum / bin_size;
        var scaled_average = Math.max(10, ((average / fftMaxValue) * eqHeight) * ampFactor);

        // Update eq bar height
        bars[i].setAttribute('height', scaled_average);

        // Center bar
        bars[i].setAttribute('y', (eqHeight - scaled_average) / 2);
      }
    }

    function playSound() {
      // create a sound source
      soundSource = context.createBufferSource();

      // Add the buffered data to our object
      soundSource.buffer = soundBuffer;

      // Create the FFT
      fft = context.createAnalyser();
      fft.smoothingTimeConstant = fftSmoothing;
      fft.fftSize = samples;

      soundSource.connect(fft);
      fft.connect(context.destination);

      soundSource.noteOn(context.currentTime);

      // Start the FFT sampler
      sampleIntervalID = setInterval(sampleAudio, 30);

      playing = true;
    }

    function stopSound() {
      // Stop the FFT sampler
      clearInterval(sampleIntervalID);

      if (soundSource) {
        soundSource.noteOff(context.currentTime);
      }
      playing = false;
    }

    var toggleAudio = function () {
      if (!playing) {
        playing = true;
        playSound();
      }
      else {
        stopSound();
        playing = false;
      }
    }

    window.addEventListener('load', function () {
      window.toggleAudio = toggleAudio;
    }, false);

      ]]></script>
    </svg>

Javascript :

  ;(function ( $, window, document, undefined ) {

  var pluginName = 'svgInject';

  function Plugin(element, options) {
    this.element = element;
    this._name = pluginName;
    this.init();
  }

  Plugin.prototype = {
    init: function () {
      $(this.element).css('visibility', 'hidden');
      this.swapSVG(this.element);
    },
    swapSVG: function (el) {
      var imgURL = $(el).attr('src');
      var imgID = $(el).attr('id');
      var imgClass = $(el).attr('class');
      var imgData = $(el).clone(true).data();

      var dimensions = {
        w: $(el).attr('width'),
        h: $(el).attr('height')
      };

      $.get(imgURL, function (data) {

        var svg = $(data).find('svg');
        if (typeof imgID !== undefined) {
          svg = svg.attr('id', imgID);
        }

        if (typeof imgClass !== undefined) {
          var cls = (svg.attr('class') !== undefined) ? svg.attr('class') : '';
          svg = svg.attr('class', imgClass + ' ' + cls + ' replaced-svg');
        }

        $.each(imgData, function (name, value) {
          svg[0].setAttribute('data-' + name, value);
        });

        svg = svg.removeAttr('xmlns:a');

        var ow = parseFloat(svg.attr('width'));
        var oh = parseFloat(svg.attr('height'));

        if (dimensions.w && dimensions.h) {
          $(svg).attr('width', dimensions.w);
          $(svg).attr('height', dimensions.h);
        }
        //Scale proportionally based on width
        else if (dimensions.w) {
          $(svg).attr('width', dimensions.w);
          $(svg).attr('height', (oh / ow) * dimensions.w);
        }
        //Scale proportionally based on height
        else if (dimensions.h) {
          $(svg).attr('height', dimensions.h);
          $(svg).attr('width', (ow / oh) * dimensions.h);
        }

        $(el).replaceWith(svg);
        var js = new Function(svg.find('script').text());
        js();

      });
    }
  };

  $.fn[pluginName] = function (options) {
    return this.each(function () {
      if (!$.data(this, 'plugin_' + pluginName)) {
        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
      }
    });
  };

})(jQuery, window, document);

Answer 1

编辑 site.js 以在 DOM 准备就绪时注入 SVG。

$(document).ready(function() {
    $('.svg-inject').svgInject();
});

注意： SVG 文件中的脚本使用已弃用的网络音频 API。

createBuffer() used to be able to take compressed data and give back decoded samples, but this ability was removed from the spec, because all the decoding was done on the main thread, therefore createBuffer() was blocking other code execution.

来源：MDN

svg: iframe 无法删除！为什么？

Svg : iframe can not delete ! Why?

javascript

jquery

iframe

svg

web-audio-api