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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
