コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > HTML5_html5 チュートリアル ヒントを使用して SVG ベクター グラフィックスを描画するための入門チュートリアル

HTML5_html5 チュートリアル ヒントを使用して SVG ベクター グラフィックスを描画するための入門チュートリアル

WBOY
リリース： 2016-05-16 15:45:59
オリジナル
2335 人が閲覧しました

VG は Scalable Vector Graphics の略で、2D グラフィックスを記述するための言語です。グラフィックス アプリケーションは 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 を直接埋め込むことができます。次のような単純な構文です。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <svg xmlns="http://www .w3.org/2000/svg">
  2. ...
  3. svg>

HTML5 - SVG サークル
これは、 タグを使用して円を描画する HTML5 バージョンの SVG サンプルです。

XML/HTML コード
コンテンツをクリップボードにコピー
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG Circle h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <circle id="redcircle" cx="50" cy="50" r="50" fill ="赤" />
  10. svg>
  11. ボディ>
  12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112130340.jpg (223×186)


HTML5 - SVG 四角形
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一个四角形：

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG 長方形 h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <rect id="リダイレクト" 幅="300" 高さ="100" fill="赤" / >
  10. svg>
  11. ボディ>
  12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112200272.jpg (316×152)


HTML5 - SVG 線条
下は、 を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一个線上条：

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG Line h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <行 x1="0" y1="0" x2="200" y2="100"
  10. スタイル="ストローク:赤;ストローク幅:2"/>
  11. svg>
  12. ボディ>
  13. html>

スタイル プロパティを使用して、電子画、塗りつぶし色、電子画度などの追加の形式情報を設定できます。

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112220725.jpg (217×159)


HTML5 - SVG 椭圆
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一个椭圆：

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG 楕円 h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <楕円 cx="100" cy="50" rx="100" ry="50" fill ="赤" />
  10. svg>
  11. ボディ>
  12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112240763.jpg (225×148)


HTML5 - SVG 多形
以下は、 を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一个多边形：

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG ポリゴン h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <ポリゴン ポイント="20, 10 300,20, 170,50" fill="赤" />
  10. svg>
  11. ボディ>
  12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112258796.jpg (310×118)


HTML5 - SVG 折り線
以下は、

を使用した SVG サンプルの HTML5 バージョンです。 标签绘制一折線图：
XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG ポリライン h2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <ポリライン ポイント="0, 0 0,20 20,20 20,40 40,40 40,60" fill="赤" />
  10. svg>
  11. ボディ>
  12. html>

在启用 HTML5 の最新版 FireFox 中会生成如下结果：
2016219112318049.jpg (245×114)


HTML5 - SVG 渐变
下は、 を使用した SVG 例の HTML5 バージョンです。 标签绘制一椭圆、使用 マークは SVG の半径方向の変化を設定します。

同様の方法で を使用できます。

は SVG 線形変化を構築します。

XML/HTML コード复制コンテンツ到剪贴板
  1. >
  2. <頭>
  3. <タイトル>SVGタイトル>
  4. <meta charset="utf- 8" />
  5. 頭>
  6. <ボディ>
  7. <h2>HTML5 SVG Gradient Ellipseh2>
  8. <svg id="svgelem" 身長="200" xmlns="http://www.w3.org/2000/svg">
  9. <defs>
  10. <radialGradient id="グラデーション" cx="50%" cy= "50%" r="50%"
  11. fx="50%" fy= "50%">
  12. <停止 オフセット="0% " スタイル="stop-color:rgb(200,200,200);
  13. stop-opacity:0"/>
  14. <停止 オフセット="100% " スタイル="stop-color:rgb(0,0,255);
  15. stop-opacity:1"/>
  16. radialGradient>
  17. defs>
  18. <楕円 cx="100" cy="50" rx="100" ry="50"
  19. スタイル="fill:url(#gradient)" />
  20. svg>
  21. ボディ>
  22. html>

HTML5 が有効になっている FireFox の最新バージョンでは、次の結果になります:
2016219112338977.jpg (319×157)
関連ラベル：
html5 svg ベクトル図
ソース：php.cn
前の記事：HTML5でアニメーション効果を実現する方法のまとめ_html5チュートリアルスキル 次の記事：HTML5オーディオタグスタイルの変更_html5チュートリアルスキル
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページのメインディスプレイに画像を表示するにはどうすればよいですか? 私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
から 2024-04-06 15:33:12
0
1
433
PDF ファイルは HTML5 と JavaScript を実行できますか? PDF に埋め込まれるため、どのコンピュータでもブロックされないプログラムを作成してみようという愚かな考えがあります (JavaScript は PDF 内で実行できると聞きました...
から 2024-04-05 12:57:00
0
1
456
HTML5 の enctype と formenctype の違いは何ですか? HTMLLivingStandard (別名、新しい HTML5 仕様) の属性 enctype と formenctype の違いは何でしょうか?私は HTML Standard...
から 2024-04-02 11:47:56
0
1
275
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート