ライブラリを使わずに JavaScript で直接 SVG 要素にアクセスして操作する方法は?-jsチュートリアル-php.cn

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

ライブラリを使用せずに JavaScript を使用して SVG 要素にアクセスする

Illustrator で作成された SVG ファイル内の個々の要素にアクセスし、その属性を動的に変更したり、イベントを処理したりするには、次のテクニックは、Raphaël や jQuery などの追加ライブラリなしで使用できます。 SVG:

1. SVG を HTML に埋め込む:

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

ログイン後にコピー

2.イベントリスナーを SVG オブジェクトに追加:

ロードイベントリスナーを <オブジェクト> に追加することが重要です。 SVG は非同期で読み込まれるため、要素です。これにより、SVG ドキュメントが読み込まれた後にその内部 DOM にアクセスできるようになります。

3.子要素へのアクセス:

SVG ドキュメントが読み込まれたら、JavaScript を使用して