HTML5 を使用して SVG ベクターグラフィックスを描画するためのコード-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 を使用して SVG ベクターグラフィックスを描画するためのコード

不言

Jun 20, 2018 am 10:00 AM

html5svgベクトル図

この記事では、基本的なグラフィック描画と簡単なグラデーション効果の紹介を含む、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 です。タグを使用して円を描画する SVG サンプルのバージョン:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Circle">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 の最新バージョンで作成します:

2016219112130340.jpg (223×186)

HTML5 - SVG Rectangle
これは SVG のサンプルですHTML5 バージョンでは、タグを使用して長方形を描画します:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Rectangle">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 の最新バージョンでは、次の結果が生成されます:

2016219112200272.jpg (316×152)

HTML5 - SVG Lines
HTML5 バージョンの SVG の例では、タグを使用して線を描画します:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Line">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 の最新バージョンでは、次の結果が得られます:
2016219112220725.jpg (217×159)

HTML5 - SVG Ellipse
ここでは、タグを使用して楕円を描画する、HTML5 バージョンの SVG の例を示します。

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Ellipse">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>

In HTML5 が有効になっている FireFox の最新バージョンでは、次の結果が生成されます。

2016219112240763.jpg (225×148)

HTML5 - SVG ポリゴン
これは、タグを使用してポリゴンを描画する SVG の例の HTML5 バージョンです。 :

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Polygon">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 では次の結果が生成されます。

2016219112258796.jpg (310×118)

HTML5 - SVG Polyline
ここでは、タグを使用して SVG を描画する HTML5 バージョンの例を示します。折れ線グラフ:

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Polyline">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 で次の結果が生成されます:

2016219112318049.jpg (245×114)

HTML5 - SVG Gradient
以下は、< を使用した SVG サンプルの HTML5 バージョンです。 ;ellipse> タグで楕円を描画し、タグで SVG 放射状グラデーションを定義します。

タグを使用して、同様の方法で SVG 線形グラデーションを作成できます。

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2 id="HTML-nbsp-SVG-nbsp-Gradient-nbsp-Ellipse">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 の最新バージョンでは、次の結果が生成されます:

2016219112338977.jpg (319×157)

上記がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP 中国語 Web サイトにご注意ください。

関連する推奨事項:

HTML5 の使用方法ファイルインターフェイスはWebページ上のファイルをダウンロードするために使用されます

HTML5で画像回転のアニメーション効果を実装する方法

HTML5 Canvasは曲線を描くメソッドを実装します

以上がHTML5 を使用して SVG ベクターグラフィックスを描画するためのコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

H5：ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1）マルチメディアサポート：H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2）オフラインストレージ：WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3）パフォーマンスの最適化：ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解：タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解：HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード：Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

SublimeText3 中国語版

中国語版、とても使いやすい

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ドリームウィーバー CS6

ビジュアル Web 開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。