Illustrator で生成された SVG ファイルから JavaScript を使用して SVG 要素にアクセスする
前述のとおり、Adobe Illustrator で作成された SVG ファイルから JavaScript を使用して SVG 要素にアクセスするRaphaël や jQuery SVG などのサードパーティ ライブラリを利用しなくても、これは確かに可能です。
これを実現するには:
1. SVG ファイルを非同期的にロードします:
HTML5
<object data="alpha.svg" type="image/svg+xml">
2.ロード イベント リスナーの追加:
ロード イベント リスナーを
<script>
var a = document.getElementById("alphasvg");
a.addEventListener("load",function(){
// code here executes after SVG loads
}, false);
</script>3.内部 DOM を取得して要素にアクセスします:
ロード イベント コールバック内で、SVG ドキュメントの内部 DOM を取得して操作します:
var svgDoc = a.contentDocument;
この svgDoc への参照を使用すると、アクセスできますgetElementById メソッドを使用した ID による特定の要素:
var delta = svgDoc.getElementById("delta");4.イベント ハンドラーの追加:
要素にアクセスできるようになったら、動作のイベント ハンドラーをアタッチできます。たとえば、「delta」要素にクリック ハンドラーを追加するには:
delta.addEventListener("mousedown",function(){
alert('hello world!')
}, false);制限事項:
この手法は同一生成元ポリシーの対象となります。したがって、内部 DOM へのアクセスを保証するには、SVG ファイルを HTML ファイルと同じドメインでホストする必要があります。
以上がJavaScript を使用して Illustrator で生成されたファイルから SVG 要素にアクセスするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
