Bagaimana untuk Mengakses dan Memanipulasi Elemen SVG Secara Terus dalam JavaScript tanpa Perpustakaan?-tutorial js-php.cn

Bagaimana untuk Mengakses dan Memanipulasi Elemen SVG Secara Terus dalam JavaScript tanpa Perpustakaan?

Susan Sarandon

Lepaskan： 2024-11-12 15:39:02

asal

882 orang telah melayarinya

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

Akses Elemen SVG dengan JavaScript tanpa Pustaka

Untuk mengakses elemen individu dalam fail SVG yang dibuat dalam Illustrator dan mengubah atribut atau mengendalikan acara secara dinamik , teknik berikut boleh digunakan tanpa perpustakaan tambahan seperti Raphaël atau jQuery SVG:

1. Benamkan SVG dalam HTML:

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

Salin selepas log masuk

2. Tambahkan Pendengar Acara pada Objek SVG:

Adalah penting untuk menambah pendengar acara memuatkan pada elemen kerana SVG dimuatkan secara tidak segerak. Ini membolehkan anda mengakses DOM dalaman dokumen SVG setelah ia dimuatkan.

3. Akses Elemen Kanak-kanak:

Setelah dokumen SVG dimuatkan, anda boleh menggunakan JavaScript untuk mengakses elemen kanak-kanak dengan menggunakan sifat contentDocument bagi unsur. Ini memberikan akses kepada DOM dalaman fail SVG.

4. Tambah Gelagat:

Setelah anda mempunyai akses kepada elemen kanak-kanak, anda boleh menambah pendengar acara untuk mengendalikan klik tetikus atau interaksi pengguna lain, mengubah atribut seperti isian atau melakukan sebarang tindakan yang diingini pada elemen SVG secara dinamik .

Nota: Teknik ini dihadkan oleh dasar asal yang sama. Fail SVG mesti dihoskan pada domain yang sama dengan fail HTML untuk mengelakkan sekatan akses.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses dan Memanipulasi Elemen SVG Secara Terus dalam JavaScript tanpa Perpustakaan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!