サードパーティのライブラリを使用せずに、JavaScript から SVG 要素に直接アクセスできますか?

SVG を最大限に活用する: JavaScript を使用して要素にアクセスする

SVG の出現により、デザイナーは動的で応答性の高いグラフィックを作成するための強力なツールを手に入れました。場合によっては、要素の塗りつぶしの変更やクリック イベントへの応答など、JavaScript を介してこれらのグラフィックを操作する必要がある場合があります。

よくある質問が 1 つあります。それは、JavaScript に依存せずに SVG 要素に直接アクセスできるかということです。 -パーティーライブラリ？答えは、完全にイエスです。

はじめに

まず、Illustrator で SVG ファイルを作成し、不要な初期データを省略してエクスポートします。これにより、各要素が一意の ID で識別される、SVG コードを含む XML ファイルが作成されます。

SVG へのアクセス

次に、SVG を HTML に埋め込みます。 <object> を使用したドキュメントタグ。後で JavaScript がオブジェクトにアクセスできるように、必ず id 属性を定義してください。

<object>

JavaScript インタラクション

SVG が埋め込まれると、個々の要素にアクセスできるようになります。 document.getElementById("elementId") を使用して ID で指定します。この手法を使用すると、SVG 内の特定の要素を操作できます。

たとえば、ID が「delta」の要素の塗りつぶしの色を変更するには、

var delta = document.getElementById("delta");
delta.setAttribute("fill", "green");

イベント処理

ユーザー操作に応答するために、SVG 要素にイベント リスナーを割り当てることもできます。クリック イベントのイベント リスナーをアタッチするには:

var delta = document.getElementById("delta");
delta.addEventListener("click", function() {
  alert("Clicked!");
}, false);

制限事項

このアプローチは実行可能ですが、制限事項に注意することが重要です。まず、クロスオリジン リソース共有 (CORS) ルールに従って、SVG を HTML ファイルと同じドメインでホストする必要があります。さらに、この手法は、SVG を操作するための特殊な機能を提供する Raphaël や jQuery SVG などの外部ライブラリを使用するほど柔軟でも包括的でもありません。

代替アプローチ

より高度な機能が必要な場合、またはクロスオリジンの問題が発生した場合は、SVG ライブラリの使用を検討してください。 Raphaël や jQuery SVG などのライブラリは、SVG 要素を操作および対話するための便利な方法を提供し、動的で応答性の高い SVG ベースのアプリケーションの作成を容易にします。

どちらの方法を選択しても、どちらのアプローチも SVG と対話するための柔軟なオプションを提供します。 JavaScript 経由。

以上がサードパーティのライブラリを使用せずに、JavaScript から SVG 要素に直接アクセスできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。