HTML5 を使用して SVG ベクター グラフィックスを描画するためのコード
この記事では、基本的なグラフィック描画と簡単なグラデーション効果の紹介を含む、HTML5 を使用して SVG ベクター グラフィックを描画するための入門チュートリアルを主に紹介します。古いバージョンの IE は十分にサポートされていないことに注意してください。
VG は Scalable Vector Graphics の略で、2D グラフィックスを記述するために使用される言語です。グラフィックス アプリケーションは XML を使用して記述され、XML は SVG リーダー プログラムによってレンダリングされます。
SVG は主に円グラフ、X、Y 座標系の 2 次元グラフなどのベクトル型グラフに使用されます。
SVG は、2003 年 1 月 14 日に W3C 勧告になりました。SVG 仕様の最新バージョンは、SVG 仕様ページで参照できます。
SVG ファイルを表示する
ほとんどの Web ブラウザーは、PNG、GIF、JPG グラフィックスを表示できるのと同じように、SVG を表示できます。 IE ユーザーがブラウザで SVG を表示できるようにするには、Adobe SVG Reader のインストールが必要な場合があります。
HTML5 に SVG を埋め込む
HTML5 では、__ タグを使用して SVG を直接埋め込むことができます:
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
HTML5 - SVG Circle
これは HTML5 です。
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Circle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>
</body>
</html>HTML5 が有効になっている FireFox の最新バージョンで作成します:
HTML5 - SVG Rectangle
これは SVG のサンプルですHTML5 バージョンでは、
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Rectangle</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<rect id="redrect" width="300" height="100" fill="red" />
</svg>
</body>
</html>HTML5 が有効になっている FireFox の最新バージョンでは、次の結果が生成されます:
HTML5 - SVG Lines
HTML5 バージョンの SVG の例では、
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Line</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="0" x2="200" y2="100"
style="stroke:red;stroke-width:2"/>
</svg>
</body>
</html>style 属性を使用して、ストローク、塗りつぶしの色、ストロークの幅などの追加のスタイル情報を設定できます。
HTML5 が有効になっている FireFox の最新バージョンでは、次の結果が得られます: 
HTML5 - SVG Ellipse
ここでは、<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>
</body>
</html>
HTML5 - SVG ポリゴン
これは、
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Polygon</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>
</body>
</html> HTML5 を有効にすると、最新バージョンの FireFox では次の結果が生成されます。 
HTML5 - SVG Polyline
ここでは、
<!DOCTYPE html> <head> <title>SVG</title> <meta charset="utf-8" /> </head> <body> <h2>HTML5 SVG Polyline</h2> <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg"> <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" /> </svg> </body> </html>HTML5 を有効にすると、最新バージョンの FireFox で次の結果が生成されます:
HTML5 - SVG Gradient
以下は、< を使用した SVG サンプルの HTML5 バージョンです。 ;ellipse> タグで楕円を描画し、
<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Gradient Ellipse</h2>
<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="gradient" cx="50%" cy="50%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="100" cy="50" rx="100" ry="50"
style="fill:url(#gradient)" />
</svg>
</body>
</html> HTML5 が有効になっている FireFox の最新バージョンでは、次の結果が生成されます:
HTML5 の使用方法
ファイルインターフェイスはWebページ上のファイルをダウンロードするために使用されます
以上がHTML5 を使用して SVG ベクター グラフィックスを描画するためのコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
基本的なHTML5ページテンプレートを書き込む方法は？
Jul 26, 2025 am 07:23 AM
ドキュメントをHTML5として宣言して、ブラウザが奇妙なモードに入るのを避けます。 2。ルート要素を定義し、アクセシビリティとSEOを改善するための言語を指定します。 3.正しい文字エンコードの確保、レスポンシブデザインの実装、およびページタイトルの設定が含まれます。 4。目に見えるすべてのコンテンツを配置し、オプションでCSS、Favicon、JavaScriptリンクを追加します。このテンプレートは完全で最新のブラウザと互換性があり、新しいHTMLファイルに適しています。
HTML5のサーバーセントイベントの理解
Jul 23, 2025 am 01:21 AM
Server-Sentevents（SSE）は、HTML5のテクノロジーであり、サーバーをリアルタイムでクライアントにプッシュするサーバーを実装し、株式市場、通知システム、その他のシナリオに適しています。 HTTPプロトコルに基づいており、接続を確立した後は開いたままです。サーバーは、自動再接続と標準のデータ形式をサポートして、いつでも更新を送信できます。フロントエンドは、Eventsourceオブジェクトを作成し、メッセージイベントを聴くことにより、データを受信します。バックエンドは、正しいMIMEタイプ（テキスト/イベントストリーム）を設定し、接続を開いて継続的に出力データストリームを保持する必要があります。それを使用する場合、クロスドメインの問題、接続タイムアウト、ブラウザの互換性、および中間層の制限に注意を払う必要があります。
html5 schema.orgマークアップを使用してカスタム語彙を定義します。
Jul 31, 2025 am 10:50 AM
Schema.orgタグは、セマンティックタグ（アイテムスコープ、アイテムタイプ、アイテムプロップなど）を使用して、検索エンジンがWebページコンテンツの構造化データ形式を理解するのに役立ちます。カスタム語彙を定義するために使用できます。方法には、既存のタイプの拡張や追加のタイプを使用して新しいタイプの導入が含まれます。実際のアプリケーションでは、構造を明確に保ち、公式の属性の使用を優先し、コードの妥当性をテストし、カスタムタイプにアクセスできるようにします。予防策には、部分的なサポートの受け入れ、綴りエラーの回避、JSON-LDなどの適切な形式の選択が含まれます。
HTML5パーサーはエラーをどのように処理しますか？
Aug 02, 2025 am 07:51 AM
html5parsershandlemalformedhtmlbyfollowingadEticalgorithmtoensureconsentandroburtendering.1.formismatchedorunclosedtags、the parserautagetally closeStagsAndAddjustsnestingSnestingSnestingStingSneStingStingStingStingStagSassandJustrising ontext
HTML5データ属性とは何ですか？
Aug 06, 2025 pm 05:39 PM
html5dataattributesarecustom、validhtmlattributesusedTostoreExtrainformationinelements forjavasdatorcss.1.theyReadefinedassdata-*属性、Likedata-user-id = "123" .2.theyallowembembembedprivate
HTML5ビデオのコントロールを表示する方法は？
Jul 26, 2025 am 08:11 AM
HTML5ビデオの再生コントロールを表示するには、コントロール属性を追加する必要があります。 1.コントロール属性をタグに追加して、デフォルトの再生、一時停止、ボリューム、進行状況バー、フルスクリーン、その他のコントロールを表示します。 2。ディスプレイをカスタマイズする必要がある場合は、javascriptによって[video.controls]をtrueまたはfalseに動的に設定できます。 3.デフォルトのコントロールスタイルは、ブラウザとオペレーティングシステムによって異なります。インターフェイスを完全にカスタマイズする必要がある場合は、コントロールを削除し、JavaScriptを使用してカスタムコントロールを構築する必要があります。コントロール属性を追加することは、再生コントロールを実装するための基本的で必要なステップです。
HTML5のとの違いは何ですか？
Aug 04, 2025 am 11:02 AM
違いの明確で実用的な説明を提供できるように、versus、vs、またはidなど、比較したい2つのHTML5要素または属性を明確にしてください。
HTML5を使用してWebページに画像を追加する方法は？
Jul 27, 2025 am 02:46 AM
Webページに画像を追加するコア方法は、タグを使用して必要な属性を一致させることです。まず、自己閉鎖タグを使用し、SRC属性を介して画像パスを指定し、代替テキストを提供します。次に、[タグをジャンプ]をクリックして画像をラップします。次に、HTML5の新しいタグを使用して、画像とタイトルを表示します。さらに、幅、高さを設定したり、CSSを使用して画像サイズを制御したり、読み込み= "lazy"を使用して怠dazロードを実現してパフォーマンスを最適化できます。
