recherche

Maison  >  Article  >  interface Web  >  Comment accéder et manipuler des éléments SVG directement en JavaScript sans bibliothèques ?

Comment accéder et manipuler des éléments SVG directement en JavaScript sans bibliothèques ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-12 15:39:02920parcourir

How to Access and Manipulate SVG Elements Directly in JavaScript without Libraries?

Accéder aux éléments SVG avec JavaScript sans bibliothèques

Pour accéder à des éléments individuels dans un fichier SVG créé dans Illustrator et modifier dynamiquement leurs attributs ou gérer des événements , la technique suivante peut être utilisée sans bibliothèques supplémentaires comme Raphaël ou jQuery SVG :

1. Intégrer SVG en HTML :

<!DOCTYPE html>
<html>
<head>
  <title>SVG Illustrator Test</title>
</head>
<body>
  <object data="alpha.svg" type="image/svg+xml"
 >

2. Ajouter un écouteur d'événement à l'objet SVG :

Il est crucial d'ajouter un écouteur d'événement de chargement à l'objet élément car les SVG se chargent de manière asynchrone. Cela vous permet d'accéder au DOM interne du document SVG une fois celui-ci chargé.

3. Accéder aux éléments enfants :

Une fois le document SVG chargé, vous pouvez utiliser JavaScript pour accéder aux éléments enfants en utilisant la propriété contentDocument de l'objet élément. Cela donne accès au DOM interne du fichier SVG.

4. Ajouter un comportement :

Une fois que vous avez accès aux éléments enfants, vous pouvez ajouter des écouteurs d'événements pour gérer les clics de souris ou d'autres interactions utilisateur, modifier des attributs tels que le remplissage ou effectuer dynamiquement toutes les actions souhaitées sur les éléments SVG. .

Remarque : Cette technique est limitée par la politique de même origine. Le fichier SVG doit être hébergé sur le même domaine que le fichier HTML pour éviter les restrictions d'accès.

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 jquery html Object Property Event 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：Pourquoi ma soumission de formulaire JavaScript ne fonctionne-t-elle pas ?Article suivant：Pourquoi ma soumission de formulaire JavaScript ne fonctionne-t-elle pas ?

Articles Liés

Voir plus