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

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

May 16, 2016 pm 03:46 PM
html5 svg チュートリアル

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

See all articles