Maison > interface Web > js tutoriel > Comment accéder aux éléments SVG à partir de fichiers générés par Illustrator avec JavaScript ?

Comment accéder aux éléments SVG à partir de fichiers générés par Illustrator avec JavaScript ?

Patricia Arquette
Libérer: 2024-11-12 07:22:02
original
513 Les gens l'ont consulté

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

Accès aux éléments SVG avec JavaScript à partir de fichiers SVG générés par Illustrator

Comme indiqué, accès aux éléments SVG avec JavaScript à partir de fichiers SVG créés dans Adobe Illustrator est en effet possible sans utiliser de bibliothèques tierces comme Raphaël ou jQuery SVG.

Pour y parvenir ceci :

1. Chargez le fichier SVG de manière asynchrone :

Incorporez un HTML5. élément pour charger le fichier SVG de manière asynchrone et accéder à son modèle objet de document (DOM).

<object data="alpha.svg" type="image/svg+xml">
Copier après la connexion

2. Ajouter un écouteur d'événement de chargement :

Attachez un écouteur d'événement de chargement à l'objet pour exécuter une fonction de rappel lorsque le chargement du document SVG est terminé et que son DOM devient disponible.
<script>
    var a = document.getElementById("alphasvg");
    a.addEventListener("load",function(){
        // code here executes after SVG loads
    }, false);
</script>
Copier après la connexion

3. Récupérer le DOM interne et accéder aux éléments :

Dans le rappel de l'événement de chargement, manipulez le DOM interne du document SVG en le récupérant :

var svgDoc = a.contentDocument;
Copier après la connexion

En utilisant cette référence à svgDoc, vous pouvez accéder éléments spécifiques par leurs identifiants en utilisant getElementById méthode :

var delta = svgDoc.getElementById("delta");
Copier après la connexion

4. Ajouter des gestionnaires d'événements :

Une fois que vous avez accès aux éléments, vous pouvez attacher des gestionnaires d'événements pour les comportements. Par exemple, pour ajouter un gestionnaire de clics à l'élément 'delta' :

delta.addEventListener("mousedown",function(){
    alert('hello world!')
}, false);
Copier après la connexion

Limitations :

Cette technique est soumise à la politique de même origine. Par conséquent, le fichier SVG doit être hébergé sur le même domaine que le fichier HTML pour garantir l'accès au DOM interne.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal