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

Susan Sarandon
Lepaskan: 2024-11-12 15:39:02
asal
933 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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan