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

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

ベージュ曲線の描画方法

SVGで2次ベジェ曲線を描く場合はパス図形を使用します。以下に記述例を示します 
<path d="M x1 y1  Q  x2 y2 x3 y2"/>
記述例のパラメーターは下記のとおりです。 
始点:(x1,y1) 制御点:(x2,y2) 終点:(x3,y3)
始点と制御点と終点を指定してベージュ曲線を描画します。
始点はMまたはmコマンドにより指定するかカレントポジションを使用します。
Qコマンドにより制御点と終点を絶対座標で指定します。

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

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

始点 x= 始点 y=
制御点x= 制御点y=
終点 x= 終点 y=



ソース=
(0,0) (0,-100) (0,100) (-100,0) (100,0) (-100,0) (0,50) (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 id="b1_cmd" d="M -100,0 Q 0 50 100 0" fill="none" stroke="black"/>
    </svg> 
</body> 
</html>