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
<object data="alpha.svg" type="image/svg+xml">
2. Ladeereignis-Listener hinzufügen:
Hängen Sie einen Ladeereignis-Listener an das
<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!