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 スクリプトを導入する