Reinitialize SVGweb for ajax

Question

I have no problem using SVGweb when page is simply loaded (opened).

How is it possible to reinitialize SVGweb in order to redraw all SVG on the page?

Anotherwords I need SVGweb to rescan and rerender everything on the page.

source (from this):

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

to this (like SVGweb si doing that when simply open the page):

<svg>
...
</svg>

I need this because I change the SVG graphics using ajax and need to rerender it on the page.

Answer 1

I needed the same capability and figured out how to do this properly without modifying the svgweb source or calling the _onDOMContentLoaded() handler manually. In fact, it is supported natively.

The trick is to (re)attach your SVG elements to the DOM using window.svgweb.appendChild() which causes the node to be processed by svgweb, as is documented within the svgweb manual.

Example, using 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();
});

For this to work properly I suggest wrapping all SVG script tags with a dedicated div, so that when attaching the SVG element it is attached to a parent element containing no other nodes. This removes the possibility of inadvertently reordering nodes during the process.

Answer 2

After the DOM is changed with a new SVGweb code (through Ajax)

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

need to execute this: svgweb._onDOMContentLoaded();

But before need to comment a line in the core source of SVGweb svg-uncompressed.js or svg.js

svg-uncompressed.js from

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

to

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

svg.js: find and delete this:

arguments.callee.done=true;

or replace with

arguments.callee.done=false;

EDIT:

One more fix to work for IE9:

for svg.js

from

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

to

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;}}

for svg-uncompressed.js

from

    // 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;
    }

to

    // 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;
        }
    }