ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript を使用して Illustrator で生成されたファイルから SVG 要素にアクセスするにはどうすればよいですか?
JavaScript を使用して Illustrator で生成されたファイルから SVG 要素にアクセスするにはどうすればよいですか?
- Patricia Arquetteオリジナル
- 2024-11-12 07:22:02475ブラウズ
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 サイトの他の関連記事を参照してください。