SVG Demo

Code

Result

Index

  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon
  • path

« back

<rect>

平行な矩形を定義する。

Snippet

  • 基本図形
  • 角丸
  • ストローク

主要属性

x 矩形の左右端のX座標
y 矩形の左右端のY座標
width 矩形の幅
height 矩形の高さ
rx 矩形の角を丸めるために用いられる楕円の X 軸半径の長さ
ry 矩形の角を丸めるために用いられる楕円の Y 軸半径の長さ

« back

<circle>

中心点と半径をもとに円を定義する。

Snippet

  • 基本図形
  • opacity

主要属性

cx 円の中心のX座標
cy 円の中心のY座標
r 円の半径

« back

<ellipse>

中心と二つの半径の長さをもとに楕円を定義する。

Snippet

  • 基本図形

主要属性

cx 円の中心のX座標
cy 円の中心のY座標
rx 楕円のX軸半径の長さ
ry 楕円のY軸半径の長さ

« back

<line>

点から点への線分を定義する。

Snippet

  • 基本図形

主要属性

x1 線分の始点のX座標
y1 線分の始点のY座標
x2 線分の終点のX座標
y2 線分の終点のY座標

« back

<polyline>

1本以上の線分がつなげられた折線を定義する。

Snippet

  • 折れ線グラフ
  • 矩形グラフ

主要属性

points 折線を構成する一連の点

« back

<polygon>

複数のつながった線分で構成される多角形を定義する。

Snippet

  • 基本図形

主要属性

points 多角形を構成する一連の点

« back

<path>

様々な図形をパスデータで汎用的に描画する

Snippet

  • 直線
  • ベジェ曲線

主要属性

d 図形の外形線の定義

d属性値で使用する命令

M moveto: 指定した座標から新しく部分パスを開始させることを指示する
Z closepath: 現在の点から現在の部分パスの始点まで直線を描き、部分パスを閉じる
L lineto: 現在の点から指定した座標へ直線を描き、その座標を新しく現在の点とする
H horizontal lineto: 現在の点から指定した座標へ水平線を描く
V vertical lineto: 現在の点から指定した座標へ垂直線を描く
C curveto: 現在の点から指定した座標へ三次ベジェ曲線を描く
S shorthand/smooth curveto: 現在の点から指定した座標へ三次ベジェ曲線を描く
Q quadratic Bezier curveto: 現在の点から制御点を用いて指定した座標へ二次ベジェ曲線を描く
T Shorthand/smooth quadratic Bezier curveto: 現在の点から指定した座標へ二次ベジェ曲線を描く
A elliptical arc: 現在の点から指定した点へ楕円形の弧を描く