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

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

ベジェ曲線の描画方法

SVGで2次ベジェ曲線を描く場合はパス図形を使用します。以下に記述例を示します。 
<path d="M x1 y1  Q  x2 y2 x3 y2" fill="none" stroke="black" />
記述例のパラメーターは下記のとおりです。 
始点:(x1,y1) 制御点:(x2,y2) 終点:(x3,y3)
本ページでは作成したベージュ曲線の概念を示す補助線を描画しています。

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

SVGの描画エリアは左上(-100,-100)-右下(100,100)ですので範囲に収まるようなベージュ曲線を指定してください。
Q0:始点と制御点を結ぶ直線上座標
Q1:制御点と終点を結ぶ直線上座標
R :ベージュ曲線

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



ソース=
(0,0) (0,-100) (0,100) (-100,0) (100,0) (-100,0) (0,50) (100,0)

t=

Q0x=

Q0y=

Q1x=

Q1y=

Rx=

Ry=

初期表示状態と同じ図形を描画する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>