suchen

Heim >Web-Frontend >js-Tutorial >Wie greife ich mit JavaScript auf SVG-Elemente aus von Illustrator generierten Dateien zu?

Wie greife ich mit JavaScript auf SVG-Elemente aus von Illustrator generierten Dateien zu?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-12 07:22:02556Durchsuche

How to Access SVG Elements from Illustrator-Generated Files with JavaScript?

Zugriff auf SVG-Elemente mit JavaScript aus von Illustrator generierten SVG-Dateien

Wie besprochen, Zugriff auf SVG-Elemente mit JavaScript aus in Adobe Illustrator erstellten SVG-Dateien ist in der Tat möglich, ohne Bibliotheken von Drittanbietern wie Raphaël oder jQuery SVG zu verwenden.

Um dies zu erreichen dies:

1. Laden Sie die SVG-Datei asynchron:

Einbinden eines HTML5 Element, um die SVG-Datei asynchron zu laden und auf ihr Dokumentobjektmodell (DOM) zuzugreifen.

<object data="alpha.svg" type="image/svg+xml">

2. Ladeereignis-Listener hinzufügen:

Hängen Sie einen Ladeereignis-Listener an das an. um eine Rückruffunktion auszuführen, wenn das SVG-Dokument vollständig geladen ist und sein DOM verfügbar wird.

<script>
    var a = document.getElementById("alphasvg");
    a.addEventListener("load",function(){
        // code here executes after SVG loads
    }, false);
</script>

3. Rufen Sie das innere DOM ab und greifen Sie auf Elemente zu:

Manipulieren Sie innerhalb des Load-Event-Callbacks das innere DOM des SVG-Dokuments, indem Sie es abrufen:

var svgDoc = a.contentDocument;

Mit dieser Referenz auf svgDoc können Sie darauf zugreifen Bestimmte Elemente anhand ihrer IDs mithilfe der getElementById-Methode:

var delta = svgDoc.getElementById("delta");

4. Ereignishandler hinzufügen:

Sobald Sie Zugriff auf die Elemente haben, können Sie Ereignishandler für Verhalten anhängen. Um beispielsweise einen Click-Handler zum Element „delta“ hinzuzufügen:

delta.addEventListener("mousedown",function(){
    alert('hello world!')
}, false);

Einschränkungen:

Diese Technik unterliegt der Same-Origin-Richtlinie. Daher muss die SVG-Datei auf derselben Domäne wie die HTML-Datei gehostet werden, um den Zugriff auf das innere DOM sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie greife ich mit JavaScript auf SVG-Elemente aus von Illustrator generierten Dateien zu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 jquery html Object for using Event function dom this Access
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie übergebe ich Arrays als Funktionsparameter in JavaScript?Nächster Artikel：Wie übergebe ich Arrays als Funktionsparameter in JavaScript?

In Verbindung stehende Artikel

Mehr sehen