HTML5のSVG2Dの紹介 - グラフィックスローリングの紹介と使用（基本形状）

著者：Eve Cole 更新時間：2025-04-03 02:00:03

基本的な形状

SVGは多くの基本的な形状を提供し、これらの要素は直接使用できます。これはキャンバスよりもはるかに優れています。ナンセンスを話さないでください、例を見てください、これは最も直接的です：

<svg>

<行x1 = "10" x2 = "50" y1 = "110" y2 = "150"ストローク= "オレンジ" fill = "透明"ストローク幅= "5"/>

<Polyline Points = "60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"

stroke = "orange" fill = "透明"ストローク幅= "5"/>

<ポリゴンポイント= "50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"

stroke = "green" fill = "透明な"ストロークwidth = "5"/>

</svg>

このHTMLに表示される結果は次のとおりです。

この例は、通常の長方形、丸い長方形、円、楕円、直線、ポリゴン、パスなど、多くの形状を描きます。これらはすべて基本的なグラフィック要素です。 rectまたはPathを使用してrectを実装できるなど、グラフを描くには多くの方法がありますが、 SVGのコンテンツを短く簡潔で読みやすい状態に保つようにする必要があります。

以下は、各形状を使用するための指示です（図の形状と位置を制御する基本的なプロパティのみがあり、充填などの特性は後で要約されます）。

長方形 - 長方要素

この要素には、位置と形状を制御する6つのプロパティがあります。

X：長方形の左上隅の座標（ユーザー座標系）のx値。

Y：長方形の左上隅の座標（ユーザー座標系）のy値。

幅：長方形の幅。

高さ：長方形の高さ。

RX：丸い角の効果が達成されると、X軸に沿った丸い角の半径。

RY：丸い角効果を達成するとき、Y軸に沿った丸い角の半径。

たとえば、上記の例では、丸いコーナー効果が達成され、RxとRyを異なる値に設定することで楕円コーナー効果を実現することもできます。

円 - 円の要素

この要素の特性は、主に中心と半径を定義するためのシンプルです。

R：円の半径。

CX：中心座標のX値。

Cy：円の中心座標のy値。

楕円 - 楕円要素

これはより一般的な円形の要素です。さまざまな楕円を達成するために、それぞれ半多数軸と半長軸の長さを制御できます。 2つの半軸が等しい場合、それは完全な円だと考えるのは簡単です。

RX：半分の軸（x半径）。

ry：半軸軸（y-radius）。

CX：中心座標のX値。

Cy：円の中心座標のy値。

線 - 線要素

直線は、開始点とエンドポイントを定義する必要があります。

X1：開始点X座標。

Y1：開始点Y座標。

X2：エンドポイントX座標。

Y2：エンドポイントY座標。

ポリライン - ポリライン要素

ポリリンは主に各ラインセグメントのエンドポイントを定義する必要があるため、パラメーターとして1つのポイントのセットのみが必要です。

ポイント：スペース、コンマ、ニューラインなどで区切られた一連のドット。各ポイントには、x値とy値の2つの数値が必要です。したがって、次の3つのポイント（0,0）、（1,1）、および（2,2）は、0、1 1、2 2として記述できます。

ポリゴン - ポリゴン要素

この要素は、ポリライン要素よりも1つのステップを実行し、最後のポイントと最初のポイントを接続して閉じた図を形成することです。パラメーターは同じです。

パス - パス要素

これは最も一般的で強力な要素です。この要素を使用すると、上記の基本的な形状だけでなく、bezier曲線のような複雑な形状も実装できます。さらに、パスを使用すると、スムーズな遷移セグメントが実現できます。 Polylineを使用してこの効果を達成することもできますが、提供する必要がある多くのポイントがあり、拡大すると効果は良くありません。この要素は、1つのパラメーターのみで位置と形状を制御します。

D：一連の描画指示と描画パラメーター（ポイント）。

描画命令は、絶対座標命令と相対座標命令の2つのタイプに分けられます。これら2つの指示で使用されている文字は同じです。つまり、上記の場合は異なります。絶対的な指示では大文字を使用し、座標も絶対座標です。相対的な指示は対応する小文字を使用し、ポイントの座標はオフセットを表します。

絶対座標描画命令

この一連の命令のパラメーターは、絶対座標を表します。現在のブラシが（x0、y0）にあると仮定すると、次の絶対座標命令は次のような意味を表します。

命令	パラメーター	説明します
m	xy	ブラシをポイントに移動する（x、y）
l	xy	ブラシは、現在のポイントからポイントまでのラインセグメントを描きます（x、y）
h	x	ブラシは、現在のポイントからポイントまでの水平線セグメントを描きます（x、y0）
v	y	ブラシは、現在のポイントからポイント（x0、y）まで垂直線セグメントを描きます
a	rx ry x-axis-rotation large-arc-flag sweep-flag xy	ブラシは、現在のポイントからポイントまでの弧を描きます（x、y）
c	x1 y1、x2 y2、xy	ブラシは、現在のポイントからポイント（x、y）までの立方体のbezier曲線を描きます
s	x2 y2、xy	立方体のベジエ曲線の特別なバージョン（最初の制御ポイントは省略されています）
Q	X1 Y1、XY	2次bezier曲線をポイント（x、y）に描く
t	xy	二次bezier曲線の特別なバージョン（コントロールポイントは省略）
z	パラメーターはありません	閉じた図を描画し、d属性がzコマンドを指定しない場合は、囲まれた図の代わりにラインセグメントを描画します。

ブラシコマンドmを移動し、ラインコマンドを描画し、l、h、v、および閉じるコマンドzはすべて比較的単純です。以下は、曲線を描画するためのいくつかの指示に焦点を当てています。アーク描画命令：rx ry x-axis-rotation large-arc-flag sweep-flag xy

2ポイントをアークに接続する方が複雑であり、多くの状況があるため、このコマンドには7つのパラメーターがあり、曲線の各属性を制御します。次のことは、数値値の意味を説明しています。

Rx、ryは、半長軸の長さとアークの半短い軸です

X軸回転は、このアークが配置されているX軸と水平方向の間の角、つまりX軸の反時計回りの回転角であり、負の数は回転角を時計回りに表します。

大型ARC-FLAGは、大きな角度アークを表す1つ、小さな角度アークを表す0です。

スイープフラグは1です。これは、中央の周りの時計回りに起動点からエンドポイントへのアークを表し、0は反時計回りの方向を表します。

x、yはアーク端子座標です。

最初の2つのパラメーターと最後の2つのパラメーターについては説明しませんが、非常に簡単です。真ん中の3つのパラメーターについて話しましょう。

X軸回転は回転角を表し、次の例でアークの違いを経験します。

<svg>

<PATH D = "M10 315

L 110 215

A 30 50 0 0 1 162.55 162.45

L 172.55 152.45

A 30 50 -45 0 1 215.1 109.9

L 315 10 "ストローク="ブラック "fill ="緑 "ストローク幅=" 2 "fill-opacity =" 0.5 "/>

</svg>

上記のHTMLは次の図を描きます。

図から、異なる楕円回転パラメーターが描かれた弧の異なる方向につながることがわかります。もちろん、このパラメーターは完全な円に影響を与えません。

大型ARCフラグとスイープフラグは、アークのサイズと方向を制御し、次の例でアークの違いを経験します。

<svg>

<PATH D = "M80 80

A 45 45、0、0、0、125 125

L 125 80 Z "Fill =" Green "/>

<PATH D = "M230 80

A 45 45、0、1、0、275 125

L 275 80 Z "fill =" red "/>

<path d = "m80 230

A 45 45、0、0、1、125 275

L 125 230 Z "Fill =" Purple "/>

<PATH D = "M230 230

A 45 45、0、1、1、275 275

L 275 230 Z "Fill =" Blue "/>

</svg>

このHTMLは次の写真を描きます。

上記から、これらのパラメーターが実際にARCのセクションを決定するために必要な唯一のパラメーターであることがわかります。また、SVGのアークはキャンバスのアークよりも複雑であることがわかります。

描画キュービックベジエカーブの指示：c x1 y1、x2 y2、xy

立方体のbezier曲線には2つの制御点、すなわち（x1、y1）と（x2、y2）があり、最後（x、y）は曲線の終点を表します。次の例を体験してください。

<svg>

</svg>

このHTMLスニペットは、次の図を描きます。

上記から、制御点が曲線のラジアンを制御することがわかります。

Cubic Bezier Curveの特別バージョン：SX2 Y2、XY

多くの場合、滑らかな曲線を描くには、曲線を複数回連続的に描く必要があります。この時点で、遷移を滑らかにするために、2番目の曲線の制御点は、多くの場合、曲線の反対側の最初の曲線制御点のマッピングポイントです。この単純化されたバージョンは、現時点で使用できます。ここでは、S命令の前に他のs命令またはcの命令がない場合、2つの制御ポイントは同じと見なされ、二次ビジエ曲線に縮退することに注意する必要があります。 S命令が別のS命令またはC命令の後に使用される場合、後続のS命令の最初の制御ポイントは、デフォルトで前の曲線の2番目の制御ポイントのマッピングポイントに設定されます。経験しましょう：

<svg>

</svg>

このHTMLフラグメントは次のように描画されます。

上記のS命令には2番目の制御ポイントしかあり、最初の制御ポイントは、前の曲線命令の2番目の制御ポイントのマッピングポイントを使用します。

描画二次ビジエ曲線命令：QX1 Y1、XY、T XY（二次bezier曲線の特別バージョン）

二次ビジエ曲線には、1つの制御点（x1、y1）のみがあり、通常は次の図に示されています。

曲線を継続的に描画している場合は、単純化されたバージョンTを使用することもできます。同様に、tがqまたはtコマンドの前にtがある場合、後続のtコマンドの制御点は、デフォルトで前の曲線のコントロールポイントのマッピングポイントに設定されます。経験しましょう：

<svg>

</svg>

このHTMLフラグメントは次のように描画されます。

同様に、tコマンドの前にqまたはtコマンドが前に行われない場合、制御点がなく、描画線は直線であると見なされます。

相対座標図面命令

絶対座標図面命令の文字は同じですが、それらはすべて小文字であることを除いてです。この一連の命令のパラメーターの座標に含まれるパラメーターは、相対座標を表します。つまり、パラメーターは現在のポイントからターゲットポイントへのオフセットを表し、正の数は軸の正のオフセットを表し、負の数は逆オフセットを表します。ただし、Z命令の場合、ケースに違いはありません。

ここでは、絶対座標命令と相対座標命令を混合方法で使用できることに注意する必要があります。混合使用により、より柔軟な描画方法につながる場合があります。

SVGパス図面に関するメモ：

穴のある図を描くときは、次のように注意する必要があります。外側の端の描画は反時計回りでなければならず、内部の穴の端の順序は時計回りでなければなりません。この方法で描かれたグラフィカルフィルエフェクトのみが正しいでしょう。

実用的なリファレンス：

スクリプトインデックス：http：//msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

開発センター：https：//developer.mozilla.org/en/svg

人気リファレンス：http：//www.chinasvg.com/

公式文書：http：//www.w3.org/tr/svg11/