検索

ホームページ >ウェブフロントエンド >H5 チュートリアル >HTML5 の SVG_html5 チュートリアル テクニックの詳細な分析

HTML5 の SVG_html5 チュートリアル テクニックの詳細な分析

WBOY
WBOYオリジナル
2016-05-16 15:46:131548ブラウズ

SVG 背景

SVGとはScalable Vector Graphicsの略で、スケーラブルなベクターグラフィックスを意味します。 1998 年、World Wide Web コンソーシアムは、XML を通じてベクター グラフィックスを表現する技術、つまり SVG を開発するワーキング グループを設立しました。 SVG も XML ファイルであるため、SVG は XML のオープン性、移植性、対話性の利点も継承しています。現在、ほぼすべての主要なブラウザが SVG をサポートしています。

などの互換性に関する詳細情報は、ここから入手できます。

基本的な SVG グラフィックを表示するには または を使用します。
SVG グラフィックを CSS 背景画像として適用します。 HTML ドキュメント内の タグ (HTML5 サポートが必要);
CSS または外部オブジェクト要素を使用する HTML 要素で SVG 変換、フィルター、その他の特殊効果を使用します。
SVG オブジェクトで Photoshop のような効果を使用します。ぼかしと色の操作;
SVG 画像でのアニメーションの使用;
SVG 形式のフォントの使用;
* SVG
* 基本コンテンツ

* SVG は HTML5 の排他的なコンテンツではありません

* HTML5 は SVG に関するネイティブ コンテンツを提供します
* HTML5 の出現前には SVG コンテンツがありました
* SVGは、簡単に言えばベクター画像です
* SVGファイルの拡張子は「.svg」です
* SVGはXML構文を使用します
* 概念
* SVGはXML技術を使用した記述です2次元グラフィックス
* SVGの特徴
* SVGで描画されたグラフィックスは検索エンジンでクロール可能
* SVGは画質を落とさずに拡大できる
* SVGとCanvasの違い
* SVG
* 解像度に依存しません
* イベント バインディングをサポート
* 大きなレンダリング領域を持つプログラム (Baidu Maps など)
* Web ゲームの実装には使用できません
*キャンバス
* 解像度に依存します
* イベント バインドをサポートしません
* Web ゲームに最適
* 画像を「.jpg」形式で保存します
* 使用方法
* いくつかの小さなファイルWeb ページ上のアイコン
* Web ページ内の動的な特殊効果 (アニメーション効果)
* HTML5 で SVG を使用します
* 要素を使用します
* 機能 - < と同様;canvas> 要素
* デフォルトのサイズは 300px*150px
* CSS スタイルを使用します。
* グラフィックを描画するには SVG を使用します。
* で
要素を定義する必要があります。 >* 長方形要素




コードをコピーします
コードは次のとおりです:




SVG は長方形を描画します



< ;!--
HTML ページで svg タグを使用する場合
* 要素を定義します
* 要素の役割と同様です。 > * デフォルトのサイズ 300px * 150px
* 幅と高さ - 属性とスタイルを設定します
* svg を使用して描画されるすべてのグラフィックは 要素内で定義する必要があります
* svg を使用して描画されるグラフィックは HTML に関連していますページ
-->






< /html>
* サークル要素







* 楕円要素



<楕円 cx="150" cy="150" rx="150" ry="100" />


* 行要素




< line x1="200" y1="200" x2="200" y2="10" ストローク幅="10" ストローク="黒"/>

< ;/ body>
* ポリライン要素



< !--
ポリライン
* 点 - 始点、頂点、終点を設定します
* x と y を区切るには「,」を使用します
* 複数の間で使用しますポイント スペース区切り
ポリラインの特徴
※デフォルトではポリライン内の領域(始点から終点まで)が黒色で表示されます
-->
<ポリラインポイント="10,10 200,10 200,200 10,200 10,10" ストローク幅="5" ストローク="ブラック" フィル="ホワイト"/>


* 多角形要素
<ポリゴン ポイント="" />


<ポリライン ポイント="10, 10 200,10 200,200 10,200 100,100 10,10" ストローク幅="5" ストローク="黒" フィル="白"/>


* 特殊効果要素
* グラデーション - グラデーション要素は 要素内で定義されます
* 線形グラデーション -
* この要素は開始要素です











< /svg>

* セクター (レイ) グラデーション -
* フィルター - ガウスぼかし
* フィルターは 要素
* 要素 - ガウスぼかし
* を使用します="SourceGraphic"
* stdDeviation - ぼかしレベルを設定します


コードをコピーします
コードは次のとおりです:


< svg width="500px" height="500px">
人生のために変化し、変化のために創造します。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTML5 プラグイン チュートリアル: 製品表示にブラウザー虫眼鏡効果を追加する window_html5 チュートリアル スキル次の記事：HTML5 プラグイン チュートリアル: 製品表示にブラウザー虫眼鏡効果を追加する window_html5 チュートリアル スキル

関連記事

続きを見る