ホームページ > 記事 > ウェブフロントエンド > HTML5 を使用して SVG ベクター グラフィックスを描画するためのコード
HTML5 を使用して SVG ベクター グラフィックスを描画するためのコード
- 不言オリジナル
- 2018-06-20 10:00:352685ブラウズ
この記事では、基本的なグラフィック描画と簡単なグラデーション効果の紹介を含む、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 では、__486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948 タグを使用して SVG を直接埋め込むことができます:
<svg xmlns="http://www.w3.org/2000/svg"> ... </svg>
HTML5 - SVG Circle
これは HTML5 です。 30de22e41cb8eb8fbfdc1f091d85e4be タグを使用して円を描画する SVG サンプルのバージョン:
<!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 バージョンでは、4f5c91326734be5b874f0369b6cec59d タグを使用して長方形を描画します:
<!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 の例では、15a73cc5312745b1b00671f6e690e36a タグを使用して線を描画します:
<!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
ここでは、d9b42b40d0fdc429c7c48871eea4816c タグを使用して楕円を描画する、HTML5 バージョンの SVG の例を示します。
<!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>In HTML5 が有効になっている FireFox の最新バージョンでは、次の結果が生成されます。
HTML5 - SVG ポリゴン
これは、6f1cb7f8499a7e0f625f982868cbc44d タグを使用してポリゴンを描画する SVG の例の HTML5 バージョンです。 :
<!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
ここでは、ce803ba1a4290bddb3ba9c6f57d4c9b4 タグを使用して SVG を描画する HTML5 バージョンの例を示します。折れ線グラフ:
<!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> タグで楕円を描画し、66a31f9c8c52db986e1878e474e2db6d タグを使用して、同様の方法で SVG 線形グラデーションを作成できます。 <!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 サイトの他の関連記事を参照してください。