SVGweb für Ajax neu initialisieren

Question

Ich habe kein Problem, SVGweb zu verwenden, wenn die Seite einfach geladen (geöffnet) wird.

Wie ist es möglich, SVGweb neu zu initialisieren, um alle SVG auf der Seite neu zu zeichnen?

Mit anderen Worten, ich brauche SVGweb, um alles auf der Seite neu zu scannen und neu zu rendern.

Quelle (von diesem):

  <svg>
    ...
  </svg>

zu diesem (wie SVGweb das tut, wenn einfach die Seite geöffnet wird):

...

Ich brauche das, weil ich die SVG-Grafiken über Ajax ändere und sie auf der Seite neu rendern muss.

Answer 1

Ich brauchte die gleiche Funktionalität und fand heraus, wie man dies richtig macht, ohne die svgweb-Quelle zu ändern oder den _onDOMContentLoaded()-Handler manuell aufzurufen. Tatsächlich wird dies nativ unterstützt.

Der Trick besteht darin, deine SVG-Elemente erneut an den DOM anzuhängen, indem du window.svgweb.appendChild() verwendest, was bewirkt, dass der Knoten von svgweb verarbeitet wird, wie im svgweb-Handbuch dokumentiert.

Beispiel mit jQuery:

// Iteriere über alle Skript-Elemente, deren Typattribut den Wert "image/svg+xml" hat.
jQuery('body').find('script[type="image/svg+xml"]').each(function () {
    // Wickel "this" (Skript-DOM-Knoten) in ein jQuery-Objekt ein.
    var $this = jQuery(this);
    // Jetzt verwenden wir die appendChild-Methode von svgweb. Das erste Argument ist unser neues SVG-Element
    //  das wir mit jQuery aus dem inneren Text des Skriptelements erstellen. Das zweite
    //  Argument ist der übergeordnete Knoten, an den wir anhängen möchten - in diesem Fall möchten wir anhängen
    //  an den übergeordneten Knoten des Skriptelements, wodurch es zu einem Geschwisterknoten wird.
    window.svgweb.appendChild(jQuery($this.text())[0], $this.parent()[0]);
    // Jetzt können wir das Skriptelement aus dem DOM entfernen und zerstören.
    $this.remove();
});

Um dies ordnungsgemäß zum Laufen zu bringen, empfehle ich, alle SVG-Skript-Tags mit einem dedizierten Div zu umhüllen, damit beim Anhängen des SVG-Elements dieses an ein übergeordnetes Element angehängt wird, das keine anderen Knoten enthält. Dies beseitigt die Möglichkeit einer unbeabsichtigten Neuanordnung von Knoten während des Vorgangs.

Answer 2

Nachdem der DOM mit einem neuen SVGweb-Code (durch Ajax) geändert wurde

  <svg>
    ...
  </svg>

muss dies ausgeführt werden: svgweb._onDOMContentLoaded();

Aber davor muss eine Zeile im Kernquellcode von SVGweb svg-uncompressed.js oder svg.js auskommentiert werden

svg-uncompressed.js von

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

zu

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

svg.js: diese Zeile finden und löschen:

arguments.callee.done=true;

oder ersetzen durch

arguments.callee.done=false;

BEARBEITEN:

Noch eine Anpassung, um für IE9 zu funktionieren:

für svg.js

von

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

zu

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

für svg-uncompressed.js

von

    // Bereinigung des onDOMContentLoaded-Handlers zum Verhindern von Speicherlecks in IE
    var listener = document.getElementById('__ie__svg__onload');
    if (listener) {
      listener.parentNode.removeChild(listener);
      listener.onreadystatechange = null;
      listener = null;
    }

zu

    // Bereinigung des onDOMContentLoaded-Handlers zum Verhindern von Speicherlecks in 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;
        }
    }