SVG長方形およびその他のSVG形状

SVG描画を使用して、いくつかの形状を作成できます。SVG図面では、パス、長方形、円、楕円、線、ポリゴン、ポリゴンの7つの形状を使用および組み合わせることができます。

このpath要素は最も一般的に見られ、通常はSVGコードをエクスポートするように設計されたプログラムによって生成されます。

上記の例でpathは、SVG図面内で使用すると、「プラス」記号(+)が生成されます。SVGpath要素は手動で作成されるのではなく、IllustratorやInkscapeなどのベクターグラフィックスを操作できる設計プログラムを通じて生成されます。

矩形

長方形要素rectは画面上に長方形を描画し、6つの属性を受け入れます。

xそしてy、矩形の左上隅の位置を割り当て、width及びheight矩形のサイズを割り当てます。rxそしてryCSSボーダー半径プロパティと同様、長方形の角の半径を割り当てます。

サークル

circle要素circleは3つの属性を受け入れます。

cxそしてcy、円の中心の位置を割り当て、r円の半径(サイズ)を割り当てます。

楕円

楕円要素はellipsecircle半径が2つの属性に分割されていることを除いて、要素に似ています。

再び、cx及びcy楕円の中心の位置を割り当て、今rxry、それぞれ、楕円の水平方向および垂直方向の半径を割り当てます。大きいほどrx「太い」楕円になり、大きいほどry細い楕円になります。場合rxry同じである、それは、円を形成します。

ライン

このline要素は単純で、4つの属性を受け入れます。

x1そしてy1属性が行の最初のポイントを割り当て、x2及びy2属性はラインの第二のポイントを割り当てます。

ポリライン

Apolylineは、単一の属性で割り当てられた一連の接続された直線です。

points属性割り当てポイントのリストには、各ポイントはコンマで区切られました。

ポリゴン

polygon要素はまた、接続された一連の直線であるが、この場合には、最後の行は自動的に初期位置に再接続します。

この例では、polyline上記と同じ形状を描画しますが、一連の線を「閉じる」ために余分な線を描画します。

詳しくは

MDNドキュメント:MDN