Pouvez-vous accéder aux éléments SVG créés dans Illustrator directement avec JavaScript ?-js tutoriel-php.cn

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

Linda Hamilton

Libérer： 2024-11-12 01:55:02

original

567 Les gens l'ont consulté

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 :

Est-il possible d'accéder directement à ces éléments, sans librairies externes comme Raphaël ou jQuery SVG ?
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">

Copier après la connexion

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!