HTML5 の SVG_html5 チュートリアルテクニックの詳細な分析-H5 チュートリアル-php.cn

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 を使用します * 要素を使用します * 機能 - 要素 * デフォルトのサイズは 300px*150px * CSS スタイルを使用します。 * グラフィックを描画するには SVG を使用します。 * で 要素を定義する必要があります。 >* 長方形要素

コードをコピーします コードは次のとおりです: SVG は長方形を描画します &lt ;!-- HTML ページで svg タグを使用する場合 * 要素を定義します * 要素の役割と同様です。 > * デフォルトのサイズ 300px * 150px * 幅と高さ - 属性とスタイルを設定します * svg を使用して描画されるすべてのグラフィックは 要素内で定義する必要があります * svg を使用して描画されるグラフィックは HTML に関連していますページ --> 長方形を描く - * x と y - 描画された四角形の左上隅の座標 * 幅と高さ - 描画された四角形の幅と高さ * スタイルではなく属性を使用する必要があります *デフォルトの色は黒です 色の設定 - 属性またはスタイルを使用できます * 塗りつぶし - 塗りつぶしの色を設定 * ストローク - ストロークの色を設定 線の幅を設定 * ストローク幅 注 * svg で描画されたグラフィックの場合、CSS 属性を使用する代わりに、style メソッドを使用してスタイルを設定します。 --> * サークル要素 円を描く - * cx と cy - 円の円座標値 * r - 円の半径 --> * 楕円要素 * 行要素 要素には 1 つのグラフィック要素のみを含めることができますか? * 複数のグラフィック要素を含めることができます --> * ポリライン要素 ポリライン * 点 - 始点、頂点、終点を設定します * x と y を区切るには「,」を使用します * 複数の間で使用しますポイント スペース区切り ポリラインの特徴 ※デフォルトではポリライン内の領域(始点から終点まで)が黒色で表示されます --> * 多角形要素 * 特殊効果要素 * グラデーション - グラデーション要素は 要素内で定義されます * 線形グラデーション - * この要素は開始要素です 線形グラデーションを設定します - * 使用方法 -要素の &lt ;defs> でグラデーションを定義します * 特徴 - ベースラインがあります * 始点の座標値 - x1 と y1 * 終点の座標値 - x2 と y2 * 注記 * この要素は開始要素 です * x1 と y1、x2 と y2 の値はすべてパーセンテージです * id 属性を定義します * 描画されたグラフィックに設定されたグラデーションを追加するために使用されますelement Medium * 要素を使用します - グラデーションの色を設定します * オフセット - グラデーションの色の位置を設定します * 値もパーセントです * stop-color - グラデーションの色を設定します * stop-opacity - グラデーションの色の透明度を設定します --> 上の線形グラデーションを設定し、それを下の四角形に追加するにはどうすればよいですか? * fill 属性を使用します。値は url (gradient 要素の #id 値) です。 -->

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

コードをコピーします コードは次のとおりです: ガウスぼかしフィルターの設定方法 * 要素を定義します。フィルターは次の要素で定義されます * 要素を定義します - SVG を表すフィルター * ガウスぼかし要素を定義します * 属性 * ="SourceGraphic" - 記述を修正 * stdDeviation - ぼかしの程度を設定 * 要素の id 属性値を定義 * グラフィックスを描画する要素に便利に追加 -- > 上のガウスぼかしを下の要素に関連付ける方法 * フィルター属性を使用します。値は url(#id) です *現在のグラフィックのフィルター - -> &lt ;/svg>

* 注 - 要素で定義 * TWO.js * 基本コンテンツ * JS ライブラリの紹介 * three.js - 特に使用3 次元グラフィックスの描画用 * two.js - 特に 2 次元グラフィックスの描画用 * two.js でサポートされる形式 * SVG - デフォルト * Canvas * WebGL - 特にfor 画像を描画します * two.js の使い方 * two.js ファイルを HTML ページに導入します * HTML ページにコンテナ ( ) を定義します * JavaScript コード内 * HTML ページ内のコンテナを取得します * Two オブジェクトを作成し、そのオブジェクトをコンテナに追加します new Two(params).appendTo(Element); * two によって提供される API メソッドを使用します。 js Draw * two.js が提供するメソッドを使用してグラフィックスを設定します * update() メソッドを使用して描画 * Two オブジェクトを作成します * コンストラクター - new Two(params) * params パラメータ - 現在のオブジェクトの情報を設定します * type - 現在使用されている形式 (Two.Types.svg) を設定します * svg - デフォルト値 * Canvas * webgl * width and height - 幅と高さを設定します * fullscreen - フルスクリーンにするかどうかを設定します * ブール値、true はフルスクリーンを意味します * グラフィックメソッド * makeLine() - 描画line * makeRectangle() - 長方形を描画します * makeCircle() - 円を描画します * makeEllipse() - 楕円を描画します * アニメーション メソッド * update() - アニメーションを更新します * play() - アニメーションの追加(ループ) * stop() - アニメーションの削除 * グラフィックスの描画スタイルを設定 * Two オブジェクトの描画メソッドを呼び出してグラフィックスを描画する場合、 returnグラフィックス オブジェクト * このグラフィックス オブジェクトを通じて関連する属性値を設定します * グループ化操作 * Two.Group * アニメーション効果 * binding(event,callback) メソッド - イベント バインディング * イベント - バインディング イベント名 * update - update() メソッドの対応関数 * すべての DOM イベントをバインド可能 * コールバック - イベント処理関数 * 拡張コンテンツ * フロントエンド開発ツール * Aptana Studio 3 - コードヒント * Webstrom - 国内フロントエンド開発アーティファクト * 実際の開発 * 多用途 SVG * 歪みなし * 検索可能 * ページの最適化 - 外部リンクの削減 * * * キャンバス - HTML 描画グラフィックス * 実際の動作では画像 (.png) として表示されます * 検索エンジンによってクロールされません * 拡大後の歪み * SVG コンテンツ * 非常に大量のコンテンツ * 静的な描画グラフィック * 動的なアニメーション効果 * 特化したイベントの提供 * インターネット上には SVG に関する情報がほとんどありません (書籍はありません) * SVG 仕様 (W3C 英語) * SVG または CANVAS は HTML ページで定義されます * 要素は 1 つだけ定義できますか? * 1 つの HTML ページで複数の 要素または 要素を定義できます * SVGもCANVASも同時に複数のグラフィックを定義(描画)できます * 実際の開発で活用 * 今後の作品開発におけるSVGの利用率は高くありません * SVG画像UIデザイナーが完成させるのが一般的です * SVGを自分でデザインした場合でも（描画） * インターネット上には既製のSVG画像を提供するWebサイトが多数あります * JSライブラリを使用します ----------------------------------------------- ---------------------------------------------------->人生のために変化し、変化のために創造します。

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

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