SVG PATH

ほーむ SVGput
<
使えるアルファベット(コマンド)と引数の個数
M:2 だったら [M 1 2]と書く
A:7 C:6 H:1 L:2 M:2 Q:4 S:4 T:2 V:1 Z:0

M 0 200 Q 300 20 400 200 Z

M 100 300 C 100 250 400 100 400 300

M 0 400 S 500 300 400 400

M 200 200 A 100 100 -45 1 1 300 300 Z

操作方法

・ポインティング
    1、Mボタン(黒→赤 or 青→赤)
    2、ラジオでコマンドを選ぶ。未選択の場合L
    3、SVGエリアクリック
    4、ZボタンでZも追加できる(黒→赤)
    5、Mボタン(赤→黒)で終了
・ポインティング編集
    1、チェインをクリック
    2、現れたサークルをドラッグ
・既存の図形を編集
    1、SVGエリアのPATH図形をクリック
    2、ポインティング編集
・テキスト直接編集
    1、コンマは使わない
    2、Mボタンが黒の状態でこの編集はできない
    3、末尾には特定の英数を打ち込んでから、戻ってスペースを入れる
・Aコマンド(Arc)の編集
    1、楕円図形が現れる
    2、マウスダウンで楕円の色が変わり、第4・5引数が変わる
    3−1、第3引数の角度、マウスダウン
     3−1−1、マウスダウン2秒後から0.1秒毎に1度回転
     3−1−2、マウスアップ・ムーブで終了
    3−2、第3引数の角度、テキスト直接編集
    4、ドラッグで太さが変わる。SVGエリアの座標値が入る
            

メモ

 図形を複数設置するには、タグ内のケツに/スラッシュを入れないと前記した図形の子要素とされ、出力されなくなる。
 viewBoxなどの値を書く時に、数字のあいだに半角スペースを入れるのが基本だろうが、これ、コンマでよかった。pathの場合はアルファベットとx値の間にコンマを入れると駄目だが、スペースなしの詰めで書くとOK。y値とアルファベットの間のコンマもOK。アルファベットは大文字で。  TはQかTの後でないと効果は無い。
 ドラッグで要素を動かそうと、draggable属性を付与してみたが反応なし。draggable属性を調べてみると、グローバル属性でどのHTML要素にも効くらしいが、SVGは別物のようだ。

始点:一番最初。 起点:各コマンドの始め。終点:コマンドの終り。 制御点:ベジェ曲線の曲率にかかわる点
M:2 始点 :始めに必須。ムーブ
Q:4 両点制御点、終点 :2次ベジェ曲線
T:2 終点 :Q,Tの後でしか効果なし。2次の滑らかな繋ぎ
C:6 起点制御点、終点制御点、終点: 3次ベジェ曲線
S:4 終点制御点 終点 :3次の滑らかな繋ぎ
L:2 終点 :直線
H:1 次X点 :水平
V:1 次Y点 :垂直
A:7 横太、縦太、角度、描き方1、描き方2、終点 :円弧アーク 
    描き方12の詳しくは書かない(書けない)。
    引数は[ 0 or 1 ]の2通りで、(太さと起点終点の妙により)合わせて最大4通りの描き方がある。
Z:0 :tunagu おしまいのしるし 
        
            

メモ

* (1 + a) 0.01

チェイン