recherche

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
Patricia Arquetteoriginal
2024-11-12 07:22:02549parcourir

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">

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>

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;

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");

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);

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!

JavaScript html5 jquery html Object for using Event function dom this Access
Déclaration：
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
Article précédent：Comment transmettre des tableaux en tant que paramètres de fonction en JavaScript ?Article suivant：Comment transmettre des tableaux en tant que paramètres de fonction en JavaScript ?

Articles Liés

Voir plus