为ajax重新初始化SVGweb

Question

当页面只是加载(打开)时，我使用SVGweb没有问题。

如何重新初始化SVGweb以便在页面上重新绘制所有SVG？

换句话说，我需要SVGweb重新扫描和重新渲染页面上的一切。

来源(来自此)：

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

这样做(就像SVGweb在打开页面时会这样做)：

<svg>
...
</svg>

我需要它，因为我使用ajax更改了SVG图形，并且需要在页面上重新呈现它。

Answer 1

使用新的SVGweb代码更改DOM之后(通过Ajax)

<script type="image/svg+xml">
  <svg>
    ...
  </svg>
</script>

需要执行这个: svgweb._onDOMContentLoaded()；

但是之前需要在SVGweb svg的核心源代码中注释一行-uncompressed.js或svg.js

svg-解压缩.js来自

    if (arguments.callee.done) {
      return;
    }

至

    if (arguments.callee.done) {
      //return;
    }

svg.js:查找并删除以下内容：

arguments.callee.done=true;

或替换为

arguments.callee.done=false;

编辑

针对IE9的另一个修复：

对于svg.js

从…

var a=document.getElementById("__ie__svg__onload");if(a){a.parentNode.removeChild(a);a.onreadystatechange=null}

至

var IEv=parseFloat(navigator.appVersion.split("MSIE")[1]);if(IEv<9){var a=document.getElementById("__ie__svg__onload");if(a){a.parentNode.removeChild(a);a.onreadystatechange=null;a=null;}}

对于svg-uncompressed.js

从…

    // cleanup onDOMContentLoaded handler to prevent memory leaks on IE
    var listener = document.getElementById('__ie__svg__onload');
    if (listener) {
      listener.parentNode.removeChild(listener);
      listener.onreadystatechange = null;
      listener = null;
    }

至

    // cleanup onDOMContentLoaded handler to prevent memory leaks on IE
    var IEv=parseFloat(navigator.appVersion.split("MSIE")[1]);
    if (IEv<9) {
        var listener = document.getElementById('__ie__svg__onload');
        if (listener) {
          listener.parentNode.removeChild(listener);
          listener.onreadystatechange = null;
          listener = null;
        }
    }

Answer 2

我需要同样的功能，并知道如何在不修改svgweb源代码或手动调用_onDOMContentLoaded()处理程序的情况下正确地完成这项工作。事实上，它是原生支持的。

诀窍是使用svgweb (与documented within the svgweb manual一样)将SVG元素(重新)附加到DOM，这会导致节点被svgweb处理。

示例，使用jQuery:

// Iterate over all script elements whose type attribute has a value of "image/svg+xml".
jQuery('body').find('script[type="image/svg+xml"]').each(function () {
    // Wrap "this" (script DOM node) in a jQuery object.
    var $this = jQuery(this);
    // Now we use svgweb's appendChild method. The first argument is our new SVG element
    //  we create with jQuery from the inner text of the script element. The second
    //  argument is the parent node we are attaching to -- in this case we want to attach
    //  to the script element's parent, making it a sibling.
    window.svgweb.appendChild(jQuery($this.text())[0], $this.parent()[0]);
    // Now we can remove the script element from the DOM and destroy it.
    $this.remove();
});

为使其正常工作，我建议使用专用div包装所有SVG脚本标记，以便在附加SVG元素时将其附加到不包含任何其他节点的父元素。这消除了在处理过程中无意中对节点重新排序的可能性。