SVGによるベジェ曲線(始点,制御点,中点,終点)の描画サンプル

icon 項目のみ表示/展開表示の切り替え

ベジェ曲線の描画方法

SVGで2次ベジェ曲線を描く場合はパス図形を使用します。以下に記述例を示します。 
<path d="M Ax Ay  Q  Bx By Cx Cy T Ex Ey"/>
記述例のパラメーターは下記のとおりです。 
始点:(Ax,Ay) 制御点:(Bx,By) 中点:(Cx,Cy) 終点:(Ex,Ey)
A～C点によりベジェ曲線が描かれますが、E点を指定することによりC～E点のベジェ曲線が自動に作成されます。
D点は自動的に作成されます。

フォームより始点、制御点、中点、終点を入力して実際に描画してみる

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるようなベージュ曲線を指定してください。

始点(A) x= 始点(A) y=
制御点(B)x= 制御点(B)y=
中点(C) x= 中点(C) y=
終点(E) x= 終点(E) y=



ソース=
(0,0) (0,-100) (0,100) (-100,0) (100,0) A(-100,0) B(50,50) C(100,0) D(50,-50) E(100,0)

初期表示状態と同じ図形を描画するhtmlソース

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
</head> 
<body> 
    <svg width="100" height="100"  viewBox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg"> 
        <path d="M -100,0 Q -50 50 0 0 T 100 0" fill="none" stroke="black"/>
    </svg> 
</body> 
</html>