ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して SVG 要素を操作するにはどうすればよいですか?
JavaScript で SVG 要素にアクセス
SVG (Scalable Vector Graphics) を使用すると、デザイナーは、損失することなく動的に操作および拡大縮小できるベクター グラフィックを作成できます。品質。 JavaScript を使用して SVG 要素にアクセスして操作するには、主に 2 つのオプションがあります。組み込みのブラウザ API を使用するか、Raphaël や jQuery SVG などの外部ライブラリを利用する方法です。
組み込みブラウザ API の使用
ネイティブ JavaScript アプローチでは、ドキュメント オブジェクト モデル (DOM) を使用して SVG にアクセスします。要素:
SVG オブジェクトへの参照の取得:
const svgObject = document.getElementById("mySVG");
ID による個々の要素へのアクセス:
const deltaPath = svgObject.contentDocument.getElementById("delta");
要素の操作属性:
deltaPath.setAttribute("fill", "#00FF00");
ユーザー インタラクションに応答するイベント リスナーの追加:
deltaPath.addEventListener("click", () => { alert("Hello World!"); });
注: これこのアプローチでは、同一オリジンであるため、SVG を HTML ファイルと同じドメインにロードする必要があります。
外部ライブラリの使用
代わりに、Raphaël や jQuery SVG などの外部ライブラリを利用することもできます。
あなたの中のライブラリHTML:
<script src="raphael.js"></script>
ライブラリを使用して SVG 要素を作成および操作します:
var paper = Raphael("mySVG"); var deltaPath = paper.path("M34.074,86.094..."); deltaPath.click(function() { alert("Hello World!"); });
比較アプローチ
|
組み込み API | 外部ライブラリ | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
パフォーマンス | 低い | 高い | |||||||||||||||
ブラウザ間の互換性 | さまざま | 概ね良好 | |||||||||||||||
使いやすさ使用 | 中 | 簡単 | |||||||||||||||
柔軟性 | 限定的 | 大きい td> |
以上がJavaScript を使用して SVG 要素を操作するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。