Ich habe eine HTML5-Seite mit einem SVG-Element darin. Ich möchte eine SVG-Datei laden, einige Elemente daraus extrahieren und sie einzeln mit einem Skript entsorgen.
Ich habe jQuery verwendet, um die SVG-Datei mit .load() erfolgreich zu laden, nachdem ich den SVG-Baum innerhalb des DOM eingefügt hatte. Aber ich möchte versuchen svg.js , um die Elemente zu manipulieren, aber in der Dokumentation kann ich keine Möglichkeit finden, die Bibliothek mit einem vorhandenen SVG zu initialisieren Element, wo ich die Objekte bekommen werde.
Idee ist es, auf das geladene SVG-Element zuzugreifen (oder es direkt mit der Bibliothek svg.js zu laden), die einzelnen Objekte in ein anderes Element zu kopieren und sie dorthin zu verschieben, wo ich es brauche. Wie geht das?
Sie sollten sich das Plugin svg.import.js ansehen
Die Dokumentation sagt ...
%Vor%Alle importierten Elemente mit einer ID werden gespeichert. Das Objekt mit allen gespeicherte Elemente werden von der Importmethode zurückgegeben:
Gegeben eine SVG-Datei 'image.svg', die
enthält %Vor%und eine Datei 'index.html' mit
%Vor%dann, wenn die Datei 'script.js'
enthält %Vor%Dann wird das SVG-Bild angezeigt und bewegt den Mauszeiger hinein und heraus des Browserfensters ändert die Farbe des Rechtecks von gelb zu blau.
Sie sollten jetzt in der Lage sein, eine beliebige SVG-Bilddatei zu ersetzen und eine beliebige Anzahl von Funktionen zu definieren, um das Bild mit der Bibliothek SVG.js zu bearbeiten. Es ist wichtig zu wissen, dass Aufrufe von an SVG.js-Methoden nicht erfolgreich sind, wenn sie stattfinden, bevor die $ (document) .ready-Funktion zurückgegeben wurde .
Für Bonuspunkte habe ich auch gefunden, dass ich die Werte der Attribute 'viewBox', 'width' und 'height' kopiere, indem ich nach der Deklaration von '$ tmp' die folgenden Zeilen hinzufüge, um den Inhalt von willkürlich anzuzeigen SVG-Dateien:
%Vor%Tags und Links javascript jquery svg html5