記事住所：https://www.cnblogs.com/sandraryan/
SVGとは何ですか
スケーラブルベクターグラフィックス（スケーラブルベクターグラフィックス）
XML言語を使用して2Dグラフィックスの説明
2. XMLに基づいてSVG、SVG DOMは、各要素が利用可能であることを意味し、それは要素JSイベントハンドラに取り付けることができます
3. SVGにおいて、各図は、オブジェクトとして扱われ描かれ、SVGオブジェクトは、プロパティが変更された場合、ブラウザは自動的にグラフィックを再生することができます
キャンバスの長所と短所（JSドロー）
1.解像度が依存
2.プロセッサは、イベントをサポートしていません。
3.弱いテキストレンダリング機能
4. PNG、JPG画像形式は、保存されたことができます
最適なオブジェクトは、画像を多用するゲームを再描画されます
SVGの長所と短所（レーベル描画）
1.解像度をサポートしていません。
2.サポートイベントハンドラ
大描画領域（マッピング・ソフトウェア）を使用してアプリケーションに適した3。
4.高い複雑さは、レンダリング速度（DOMの過度の使用を）遅くなります
ゲームは作るには適していません
共通タグ
<SVG> </ SVG> SVGのルート要素
<のRect>矩形
幅と高さは、四角形四角形要素の高さと幅を定義する属性
CSSはスタイル属性を定義するために使用されます
色の定義された矩形を塗りつぶしCSSのプロパティを埋めます
長方形定義された境界線のCSS幅ストローク-width属性
カラーストロークプロパティはCSSの境界を示す矩形を定義します
< SVG 幅= '500' の高さ= '500' > < RECT 幅= '50' の高さ= '50' スタイル= '' ストローク= '＃000' ストローク幅= '5' > </ RECT > </ SVG >
この時間EMMは曲がっ
値の十分なXYを追加
左位置x属性は、矩形を定義（例えば、X =「0」が矩形所定の距離の左側にある0PXブラウザウィンドウ）
トップ位置y属性は（ブラウザウィンドウ0PXの上部に矩形の定義から、例えば、Y =「0」）の矩形を定義します
< SVG 幅= '500' の高さ= '500' > < RECT X = '10' 、Y = '10' 幅= '50' 高さ= '50' スタイル= '' ストローク= '＃000' 埋める'赤色=' ストローク幅= '10' > </ RECT > </ SVG >
ラウンドプレート（フィレットをペイント、XY方向）RXとRY値を、追加~~~
< SVG 幅= '500' の高さ= '500' > < RECT X = '10' 、Y = '10' RX = '50' RY = '50' 幅= '50' 高さ= '50' スタイル= '' ストローク= '＃000' 埋める= '赤' ストローク幅= '10' > </ RECT > </ SVG >
不透明度=」0.4' を設定し透明性
塗りつぶし-opacity =」0.4'の色の透明度を埋めます
栗を与えないシンプルな~~~
<サークル>ラウンド
< 円CX = "100" CY = "50" R = "40" ストローク= "黒" ストローク幅= "2" 埋める= "赤" >
CXとCYドットは、x座標とy座標を定義します。CYとCXは省略され、デフォルト（0、0）
円の半径r
<楕円>楕円
< 楕円CX = '90' CY = '100' RX = '40'のRY = '20' を埋める= '赤' ストローク= 'ブラック' > </ 楕円>
X楕円定義された属性のCX、Y座標CYの中心座標
水平半径RX属性定義され、RY垂直半径
<夕食のために継続するには>
<ライン>ライン
<ポリライン>ポリライン
<ポリゴン>ポリゴン
<パス>パス