recherche

Maison >interface Web >js tutoriel >Pouvez-vous accéder aux éléments SVG créés dans Illustrator directement avec JavaScript ?

Pouvez-vous accéder aux éléments SVG créés dans Illustrator directement avec JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-12 01:55:02566parcourir

Can You Access SVG Elements Created in Illustrator Directly with JavaScript?

Accès aux éléments SVG depuis Illustrator via JavaScript

Certains concepteurs préfèrent créer des fichiers SVG dans Illustrator pour une manipulation ultérieure avec JavaScript. Cela a soulevé la question de savoir s'il était possible d'accéder à des éléments spécifiques de ces SVG à l'aide de JavaScript.

L'extrait de code donné présentait un SVG généré par Illustrator avec des éléments identifiés par des identifiants et une page HTML de base. Deux questions se sont posées :

  1. Est-il possible d'accéder directement à ces éléments, sans librairies externes comme Raphaël ou jQuery SVG ?
  2. Si oui, quelle technique peut-on employer ?

Réponse :

Est-ce possible ?

Oui, il est tout à fait faisable d'accéder aux éléments SVG créés dans Illustrator directement depuis JavaScript, sans avoir besoin de bibliothèques supplémentaires.

Technique :

Le code suivant démontre une approche de base qui fonctionne :

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

Clé Points :

  • Un écouteur d'événement est ajouté à l'objet pour garantir que le script s'exécute après le chargement du SVG.
  • L'utilisation de contentDocument permet d'accéder au DOM interne du SVG. fichier.
  • Les éléments du SVG sont ensuite accessibles via leurs identifiants et les gestionnaires d'événements attribués.

Remarque : Pour exécuter correctement ce code HTML, il doit être hébergé sur un serveur Web comme IIS ou Tomcat en raison de la restriction de la politique de même origine.

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 tomcat jquery html Object if for using internal Event dom this IIS 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 « SpreadsheetApp.flush() » est-il important pour le contrôle d'exécution dans Google Apps Script ?Article suivant：Pourquoi « SpreadsheetApp.flush() » est-il important pour le contrôle d'exécution dans Google Apps Script ?

Articles Liés

Voir plus