HTML ページに SVG を挿入する複数の方法

HTML ページに SVG を挿入する複数の方法

SVG (Scalable Vector Graphics)は、XML 構文に基づいた画像形式です。他の画像形式はピクセル処理に基づいていますが、SVG は画像の形状を記述したものなので、基本的には比較的サイズの小さいテキスト ファイルであり、拡大しても歪みません。

svgタグを挿入

<svg>タグを直接使用して Web ページにコンテンツを挿入し、それを DOM の一部にしてから、CSS と JS を使用して制御できます。

単純な円:

<svg 幅="400" 高さ="300" id="testSvg">
   <circle cx="100" cy="100" r="50" fill="red"strok="black" strok-width="2" id="testCircle"></circle>
</svg>

// CSS を使用して SVG のスタイルを制御できますが、属性は通常の Web 要素の属性とは異なります <style type="text/css">
   #testSvg {境界線:1px 実線 #ccc;}
   #testSvg 円 {
   	塗りつぶし: 赤;
   	ストローク:青;
   	ストローク幅: 3;
   }
</スタイル>

//JS を使用して SVG を操作したり、簡単なアニメーションを作成したりできます。<script type="text/javascript">
   var 円 = document.getElementById("testCircle");
   円.addEventListener("クリック", 関数(e) {
   	console.log("円をクリックしてください...");
   	円に属性を設定します。
   }、 間違い);
</スクリプト>

//JS を使用するだけでなく、SVG 独自の animate を使用してアニメーション効果を作成することもできます<svg width="400" height="300" id="testSvg">
   <circle cx="100" cy="100" r="50" id="testCircle">
   	<animate attributeName="cx" from="100" to="300" dur="2s" repeatCount="indefinite"></animate>
   </circle>
</svg>

表示効果:

ここに画像の説明を挿入

svgファイルを挿入

<img> <embed> <object> <iframe>などのタグを使用して、SVG ファイルを Web ページに挿入できます。
<img>を除き、他のすべてのタグは二重タグ形式を使用する必要があります。

//<img> タグを使用する <img src="test.svg'" />
//または SVG の base64 エンコード <img src="data:image/svg+xml;base64,[data]" />

//<embed> タグを使用します <embed id="embedSvg" type="image/svg+xml" src="test.svg"></embed>
//SVG DOMを取得する
var 埋め込みSVG = document.getElementById("埋め込みSVG").getSVGDocument();
console.log("SVG DOM: ", 埋め込みSvg);
		
//<object> タグを使用します <object id="objectSvg" type="image/svg+xml" data="test.svg"></object>
//SVG DOMを取得する
var objectSvg = document.getElementById("objectSvg").getSVGDocument();
console.log("SVG DOM: ", objectSvg);

//<iframe> タグを使用する <iframe id="iframeSvg" src="test.svg"></iframe>
//SVG DOMを取得する
var iframeSvg = document.getElementById("iframeSvg").contentDocument;
console.log("SVG DOM: ", iframeSvg);

SVG DOM出力:

ここに画像の説明を挿入

SVGを他のWebページ要素の背景画像として使用する

これは、SVG を Web ページに挿入する偽装された方法であり、つまり、SVG を通常の画像として使用し、アニメーション効果を表示できないようにします。

<スタイル タイプ="text/css">
	.svg-div {
		幅:400ピクセル;
		高さ:300px;
		background:url("test.svg") 繰り返しなし 中央 / 50%;
		境界線:1px実線 #ccc;
	}
</スタイル>

<div class="svg-div"></div>

効果:

ここに画像の説明を挿入

SVGソースコードを読む

SVG ファイルは本質的に XML テキストであるため、XML コードを読み取ることで SVG ソース コードを読み取ることができます。

var svgStr = new XMLSerializer().serializeToString(document.getElementById("testSvg"));
コンソールにログ出力します。

要約する

これで、HTML ページに SVG を挿入するさまざまな方法についての記事は終了です。HTML に SVG を挿入する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  MySQL データベースのマスター・スレーブ レプリケーションと読み取り/書き込み分離

>>:  njs モジュールを使用して nginx 構成に js スクリプトを導入する

推薦する

Web ページのエンコーディングで gbk や gb2312 ではなく utf-8 が使用されるのはなぜですか?

選択肢がある場合は、UTF-8を使用することをお勧めします。実際、Windows システム自体のプロ...

IE8 ベータ 1 には注意が必要な 2 つの領域があります

<br />関連記事: Web スキル: 複数の IE バージョンを共存させるソリューシ...

SQL Server コメントのショートカット キー操作

SQL Server のバッチコメントバッチ注釈Ctrl + (K, C): Ctrlキーを押しなが...

MySql マスタースレーブレプリケーションの実装原理と構成

データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...

Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

目次Jenkinsのインストールインストールポート番号を変更します(デフォルトのポートは8080です...

Angular CDK を使用してサービスポップアップトーストコンポーネント機能を実装する

目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...

JSscriptタグの属性は何ですか

JS スクリプト タグの属性は何ですか? charset : オプション。 src 属性で指定された...

MySQL ビューの原理と使用法の詳細な分析

序文: MySQL では、ビューはおそらく最も一般的に使用されるデータベース オブジェクトの 1 つ...

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

docker-compose が遅すぎる場合の解決策の詳細な説明

解決策はただ一つ、ソースを変更することです。 github からのソースは基本的にタイムアウトするの...

MySQL DDL による同期遅延を解決する方法

目次序文解決ツールの紹介仕組み使用制限使用上の注意使用例いくつかのパラメータの説明出力例Tencen...

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...

MySQL 最適化における B ツリー インデックスの知識ポイントのまとめ

SQL を最適化する必要があるのはなぜですか?当然ですが、SQL ステートメントを記述する場合、次の...

CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明特定の要素については、背景background-imageを半透明にしたいが、テキス...

Mysql クエリの結果セットを JSON データに変換するサンプル コード

Mysql はクエリ結果セットを JSON データに変換します 序文 学生テーブル 学生スコアテーブ...