この記事では、基本的なグラフィック描画と簡単なグラデーション効果の紹介を含む、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 - 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 - 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 の使用方法
ファイルインターフェイスはWebページ上のファイルをダウンロードするために使用されます
以上がHTML5 を使用して SVG ベクター グラフィックスを描画するためのコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。