Can You Access SVG Elements Created in Illustrator Directly with JavaScript?-JS Tutorial-php.cn

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

Linda Hamilton

Release： 2024-11-12 01:55:02

Original

542 people have browsed it

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

Accessing SVG Elements from Illustrator via JavaScript

Some designers prefer to create SVG files in Illustrator for later manipulation with JavaScript. This raised the question of whether it's possible to access specific elements within such SVGs using JavaScript.

The given code snippet presented an Illustrator-generated SVG with elements identified by IDs and a basic HTML page. Two questions emerged:

Is it possible to access these elements directly, without external libraries like Raphaël or jQuery SVG?
If so, what technique can be employed?

Answer:

Is it Possible?

Yes, it is entirely feasible to access SVG elements created in Illustrator directly from JavaScript, without needing additional libraries.

Technique:

The following code demonstrates a basic approach that works:

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

Copy after login

Key Points:

An event listener is added to the object to ensure the script runs after the SVG is loaded.
Using contentDocument allows access to the internal DOM of the SVG file.
Elements within the SVG can then be accessed by their IDs and assigned event handlers.

Note: To run this HTML properly, it must be hosted on a web server like IIS or Tomcat due to the same-origin policy restriction.

The above is the detailed content of Can You Access SVG Elements Created in Illustrator Directly with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!