svg put

操作説明

描けたら

    ・Mボタンを黒くしておく。
    ・開発者ツール(safariの場合：option + command + [i])
        「要素」タブ
            body -> div.middle -> div.down -> svg
                グリッド線などの余計なものの下に、描いた図形のタグがあるので、コピーして別のページで使う。

    ・直接データをいじる
    ・外部からデータをコピーして< svg>タグを右クリック、「追加」「子」ペースト。

PATH

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

そのほか

・図形のターゲッティングはマウスダウンではなくクリック。なので、マウスダウンしてドラッグしても反応しなかったり、別のが動く。・上の図形をクリックで下にクローン・input numberの変更値は図形要素に保持されるが、input numberには保持されない。・svgエリア・viewBoxのサイズ調整はここでは用意していない。・カラー対応属性選択時にカラーピッカーを変更で反映・カラー対応：fill, stroke ・透明度設定(safari)：カラーパネル表示　-> スライダーをスライドさせずに%直接入力 -> カラーパネルで他の操作をせずに非アクティブにする・polygonの変換の仕方：１、polygon図形を選択。２、属性を選択。３、POINTINGをチェック。４、svgエリアを３点以上クリック・ドラッグはtransform rotateの変更。還元もできる(一部の図形は無効)。・赤白の円はrotateの軸。

・属性transform -> numberInput はrotateの角度に対応。・開発者ツール・直接データをいじる・外部からデータをコピーして< svg>タグを右クリック、「追加」「子」ペースト。

メモ

属性選択時に[input number]のバリュー値も図形が持っている値に変えているけど（jsで）、（直接）一度触るとシャドウコンテンツやらcontenteditableが邪魔してうまく動かない。うっとうしい。とりあえず毎回、新[input number]作ってreplace

svg-textをドラッグすると、当然tspanごと移動する。tspanだけを操作対象にする。

svg関係ないメモ。${}反応しないなぁ。昔のjsファイルで使えてるのに。。。なるほどバッククォートか！

svg関係ないけど、このページは２つのjsファイルを使っている。それぞれにconst xxxと変数・定数を定義するとダブり判定になる。

SVG PUT

操作説明

描けたら

PATH

そのほか

メモ