[編集モード] SVG画像を描画するプラグイン

なでしこさんでSVG画像を描画するプラグインの基本版。基本的な描画と変形(transform)ができます。アドベントカレンダー2022、６日目。

/*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*
＃ 【 SVG描画 】　v 0.9.2

・基本的な描画。
・変形(transform)

※　取り込み文
！『https://n3s.nadesi.com/plain/SVG.nako3』を取り込む。

作者:雪乃☆雫　／　ライセンス:CC0　／　制作時のナデシコバージョン:3.3.81
*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*/
＃定数宣言
定数 無色＝「none」。
定数 SVGデフォルト値一覧＝{
    "stroke":無色,
    "stroke-width":1,
    "stroke-opacity":1,
    "stroke-linecap":"butt",
    "stroke-linejoin":"miter",
    "stroke-dasharray":"none",
    "stroke-dashoffset":0,
    "fill":黒色,
    "fill-opacity":1,
    "font-family":空,
    "font-weight":"normal",
    "font-size":"medium",
}

＃変数宣言
変数 SVG要素作成個数＝0。
変数 SVG描画設定情報＝{
  "線":{
    "stroke":無色,
    "stroke-width":1,
    "stroke-opacity":1,
    "stroke-linecap":"butt",
    "stroke-linejoin":"miter",
    "stroke-dasharray":"none",
    "stroke-dashoffset":0,
  },
  "塗":{
    "fill":黒色,
    "fill-opacity":1,
  },
  "文字":{
    "font-family":空,
    "font-weight":"normal",
    "font-size":"medium",
  }
}
変数 SVGパス作成情報＝{"連続パス作成中フラグ":オフ}

SVG和スタイル追加。
●SVG和スタイル追加
　追加和スタイル＝{
    "線色": "stroke",
    "線太":"stroke-width",
    "線太さ":"stroke-width",
    "線透明度":"stroke-opacity",
    "線端形状":"stroke-linecap",
    "端切":"butt",
    "円":"round",
    "丸":"round",
    "四角":"square",
    "角形状":"stroke-linejoin",
    "鋭角":"miter",
    "丸め":"round",
    "面取":"bevel",
    "面取り":"bevel",
    "破線パターン":"stroke-dasharray",
    "破線開始位置":"stroke-dashoffset",
    "塗色": "fill",
    "塗り色": "fill",
    "塗透明度":"fill-opacity",
    "塗り透明度":"fill-opacity",
    "透明度":"opacity",
    "フォント名":"font-family",
    "文字太":"font-weight",
    "文字太さ":"font-weight",
    "文字間":"letter-spacing",
    "元画像":"SourceGraphic",
    "影":"SourceAlpha"
  }
　追加和スタイルを反復
　　DOM和スタイル[対象キー]＝対象。
　ここまで。
ここまで。

#-----------------------------------------------
＃ＳＶＧ親要素
//これが無いと始まらない。
●(whの|whで)SVG親要素作成
    変数 [w,h]＝wh。
    EL＝「svg」のSVGエレメント作成。
    ELの「setAttribute」を['xmlns','http://www.w3.org/2000/svg']でJSメソッド実行。
    ELの「setAttribute」を['xmlns:xlink','http://www.w3.org/1999/xlink']でJSメソッド実行。
    ELの「viewBox」に「0 0 {w} {h}」をSVG属性設定。
    ELの「width」にwをSVG属性設定。
    ELの「height」にhをSVG属性設定。
    DOM親要素へELをDOM子要素追加。
    ELへDOM親要素設定。
    ELを戻す。
ここまで。
#-----------------------------------------------
＃描画開始
//単なるDOM要素設定だけど、キャンバスの描画命令に寄せる＆クリップやマスクの描画開始が分かりやすくなる感。
//SVG親要素は、作成時にDOM親要素設定するので必要ない。
●(svgの|svgへ|svgで)SVG描画開始
    svgへDOM親要素設定。
ここまで。
#-----------------------------------------------
＃図形描画
＃＃線
●(xy1からxy2まで|xy2へ)SVG線描画
    変数 [x1,y1]＝xy1。
    変数 [x2,y2]＝xy2。
    EL＝「line」のSVGエレメント作成。
    ELに{「x1」:x1,「y1」:y1,「x2」:x2,「y2」:y2}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。

＃＃四角
●(xywhの|xywhへ|xywhに)SVG四角描画
    変数 [x,y,w,h]＝xywh。
    EL＝「rect」のSVGエレメント作成。
    ELに{「x」:x,「y」:y,「width」:w,「height」:h}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。

●(xywhへrの|xywhにrで)SVG角丸四角描画
    もし、r[1]＝未定義ならば、r＝[r,r]。
    変数 [x,y,w,h]＝xywh。変数 [rx,ry]＝r。
    EL＝「rect」のSVGエレメント作成。
    ELに{「x」:x,「y」:y,「width」:w,「height」:h,「rx」:rx,「ry」:ry}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。

＃＃円、楕円
●(xyへrの|xyに)SVG円描画
    変数 [x,y]＝xy。
    EL＝「circle」のSVGエレメント作成。
    ELに{「cx」:x,「cy」:y,「r」:r}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。

●(xyへrの|xyに)SVG楕円描画
    もし、r[1]＝未定義ならば、r＝[r,r]。
    変数 [x,y]＝xy。変数 [rx,ry]＝r。
    EL＝「ellipse」のSVGエレメント作成。
    ELに{「cx」:x,「cy」:y,「rx」:rx,「ry」:ry}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。

＃＃ポリゴン、ポリライン
# PはSVGの記述通り「x1,y1 x2,y2 x3,y3...」と、なでしこのキャンバスのと同じ配列での指定ができる[[x2,y1],[x2,y2],[x3,y3]...]
# 線だけにしたい場合は、SVG塗り色を「none」にする。
●(Pの|Pで)SVG折れ線描画
    もし、(Pの変数型確認)＝「object」ならば、P=Pを「 」で配列結合。
    EL＝「polyline」のSVGエレメント作成。
    ELの「points」にPをSVG属性設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。

●(Pの|Pで)SVG多角形描画
    もし、(Pの変数型確認)＝「object」ならば、P=Pを「 」で配列結合。
    EL＝「polygon」のSVGエレメント作成。
    ELの「points」にPをSVG属性設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。

＃＃図形
●(数で中点に半径の|中点へ)SVG星描画
    外径,内径＝半径。
    もし、内径＝未定義ならば、内径は外径/2。
    P＝空配列。
    数*2回
        角度＝(360/(数*2))*(回数-1)。
        もし、回数%2＝１ならば、半径＝外径。
        違えば、半径＝内径。
        x＝半径*COS(((角度-90)をラジアン変換))＋中点[0]。
        y＝半径*SIN(((角度-90)をラジアン変換))＋中点[1]。
        Pへ[x,y]を配列追加。
    ここまで。
    PでSVG多角形描画。
ここまで。

●(xywhの|xywhへ|xywhに)SVGハート描画
    変数 [x,y,w,h]＝xywh。
    変数 r＝w/4。
    空にSVG連続パス描画開始。
        [x+r,y+r]に-180をラジアン変換から0までrのSVG円弧描画。
        [x+r*3,y+r]に-180をラジアン変換から0までrのSVG円弧描画。
        [x+r*2,y+h]まで[x+w,y+h/3*2]でSVG二次ベジェ曲線描画。
        [x,y+r]まで[x,y+h/3*2]でSVG二次ベジェ曲線描画。
    SVG連続パス描画終了。
ここまで。
#-----------------------------------------------
＃文字描画
●(xyへSの|xyにSを文字間で)SVG文字描画
    変数 [x,y]＝xy。
    EL＝「text」のSVGエレメント作成。
    ELに{「x」:x,「y」:y, 「文字間」:文字間}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    ELにSVG描画設定情報["文字"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELにSをテキスト設定。
    ELを戻す。
ここまで。

●(xyへSの|xyにSを文字間で)SVG縦書き文字描画
    変数 [x,y]＝xy。
    EL＝「text」のSVGエレメント作成。
    ELに{「x」:x,「y」:y,「文字間」:文字間,
         「writing-mode」:「vertical-rl」,
         「text-orientation」:「mixed」}をSVG属性一括設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    ELにSVG描画設定情報["文字"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELにSをテキスト設定。
    ELを戻す。
ここまで。

//whは[行間,文字間]
●(xyにwhでsを|xyへ)SVG文章描画。
    x,y＝xy。
    もし、wh＝空ならば、wh＝[0,4]。
    行間,文字間＝wh。
    もし、行間＝未定義ならば、行間＝0。
    もし、文字間＝未定義ならば、文字間＝4。
    s＝sを改行で区切る。
    h＝SVG文字高さ取得＋行間。
    sを反復。
        [x,y]に対象を文字間でSVG文字描画。
        y=y+h。
    ここまで。
ここまで。

//whは[行間,文字間]
●(xyにwhでsを|xyへ)SVG縦書き文章描画
    x,y＝xy。s＝sを改行で区切る。
    もし、wh＝空ならば、wh＝[0,0]。
    行間,文字間＝wh。
    もし、行間＝未定義ならば、行間＝0。
    もし、文字間＝未定義ならば、文字間＝0。
    w＝SVG文字幅取得＋行間。
    sを反復
        [x,y]に対象を文字間でSVG縦書き文字描画。
        x=x-w。
    ここまで。
ここまで。

＃＃文字の幅と高さ取得
//「getBBox」も「getBoundingClientRect」も欲しい値と違うのでとりあえず無理矢理系；
●SVG文字幅取得
    文字太さ＝SVG描画設定情報["文字"]["font-weight"]。
    文字サイズ＝SVG描画設定情報["文字"]["font-size"]。
    フォント＝SVG描画設定情報["文字"]["font-family"]。
    もし、フォント＝空ならば、フォント＝「sans-serif」。
    仮＝[0,0]のキャンバス作成。仮へ描画開始。
    「{文字太さ} {文字サイズ} {フォント}」に描画フォント設定。
    TM=「あ」の文字描画幅取得。
    DOM親要素から仮をDOM子要素削除。# 消して終了。
    TM["width"]で戻る。
ここまで。

●SVG文字高さ取得
    文字太さ＝SVG描画設定情報["文字"]["font-weight"]。
    文字サイズ＝SVG描画設定情報["文字"]["font-size"]。
    フォント＝SVG描画設定情報["文字"]["font-family"]。
    もし、フォント＝空ならば、フォント＝「sans-serif」。
    仮＝[0,0]のキャンバス作成。仮へ描画開始。
    「{文字太さ} {文字サイズ} {フォント}」に描画フォント設定。
    TM=「あ」の文字描画幅取得。
    DOM親要素から仮をDOM子要素削除。# 消して終了。
    TM["actualBoundingBoxAscent"]+TM["actualBoundingBoxDescent"]で戻る。
ここまで。
#-----------------------------------------------
＃パス描画
●(dの|dを|dで)SVGパス描画
    EL＝「path」のSVGエレメント作成。
    ELの「d」にdをSVG属性設定。
    ELにSVG描画設定情報["線"]をSVG描画初期設定。
    ELにSVG描画設定情報["塗"]をSVG描画初期設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。

＃＃連続パス描画
//連続パス描画中は始点を省略してつないでいく。
●(始点から|始点に|始点へ)SVG連続パス描画開始
    SVGパス作成情報["連続パス作成中フラグ"]＝オン。
    SVGパス作成情報["d"]＝空。
    もし、(始点＝空)または((始点の要素数)≠2)でなければ、SVGパス作成情報["d"]＝「M {始点[0]},{始点[1]} 」
    SVGパス作成情報["d"]で戻る。
ここまで。

●SVG連続パス描画終了
    SVGパス作成情報["連続パス作成中フラグ"]＝オフ。
    SVGパス作成情報["d"]でSVGパス描画。
ここまで。

●(追加パスで)SVG連続パス追加処理
    SVGパス作成情報["d"]＝SVGパス作成情報["d"]&追加パス。
    SVGパス作成情報["d"]で戻る。
ここまで。

//連続パス描画でだけ
●(xyへ|xyに|xyまで)SVGパス描画位置移動
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。
    追加パス＝「M {xy[0]},{xy[1]} 」
    追加パスでSVG連続パス追加処理して、戻る。
ここまで。

＃＃線
●(xy1からxy2まで|xy2へ)SVGパス線描画
    x1,y1＝xy1。x2,y2＝xy2。
    始点＝「M {x1},{y1} 」。追加パス＝「L {x2},{y2} 」
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでSVG連続パス追加処理して、戻る。
    d＝始点&追加パス。
    dでSVGパス描画。
ここまで。

＃＃弧
//設定配列=[回転度,弧が180度より大きいか,時計回りか]
●(始点から終点まで設定配列で半径の)SVG弧形描画
    始点＝「M {始点[0]},{始点[1]} 」。
    もし、設定配列＝空ならば、設定配列＝[0,0,1]。
    回転度,大弧,右回転＝設定配列。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    追加パス＝「A {半径x},{半径y} {回転度} {大弧} {右回転} {終点[0]} {終点[1]} 」
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでSVG連続パス追加処理して、戻る。
    d＝始点&追加パス。
    dでSVGパス描画。
ここまで。

# 角度はラジアン。角度0は右端。
●(中点に開始角から終了角まで半径の|中点へ半径で)SVG扇描画
    中点x,中点y＝中点。
    開始角＝開始角のラジアン角度修正。
    終了角＝終了角のラジアン角度修正。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    x1＝半径x*COS(開始角)＋中点x。
    y1＝半径y*SIN(開始角)＋中点y。
    x2＝半径x*COS(終了角)＋中点x。
    y2＝半径y*SIN(終了角)＋中点y。
    回転度＝0。     # 回転度
    大弧＝いいえ。  # 弧が180度より大きいか
    もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換)
    もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。
    右回転＝はい。  # 時計回りか
    d＝「M {中点x},{中点y} L {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} z 」
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、dでSVG連続パス追加処理して、戻る。
    dでSVGパス描画。
ここまで。

●(中点に開始角から終了角まで半径の|中点へ半径で)SVG円弧描画
    中点x,中点y＝中点。
    開始角＝開始角のラジアン角度修正。
    終了角＝終了角のラジアン角度修正。
    半径x,半径y＝半径。もし、半径y＝未定義ならば、半径y＝半径x。
    x1＝半径x*COS(開始角)＋中点x。
    y1＝半径y*SIN(開始角)＋中点y。 
    x2＝半径x*COS(終了角)＋中点x。
    y2＝半径y*SIN(終了角)＋中点y。
    回転度＝0。     # 回転度
    大弧＝いいえ。  # 弧が180度より大きいか
    もし、終了角＜開始角ならば、終了角＝終了角+(360をラジアン変換)
    もし、終了角-開始角＞(180をラジアン変換)ならば、大弧＝はい。
    右回転＝はい。  # 時計回りか
    d＝「M {x1},{y1} A {半径x},{半径y} {回転度} {大弧} {右回転} {x2},{y2} 」
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、dでSVG連続パス追加処理して、戻る。
    dでSVGパス描画。
ここまで。

●(ラジアン度の)ラジアン角度修正　//0～360をラジアン変換の範囲に修正
    修正ラジアン度＝ラジアン度%(360をラジアン変換)
    もし、修正ラジアン度＜０ならば、修正ラジアン度＝修正ラジアン度+(360をラジアン変換)
    修正ラジアン度で戻る。
ここまで。

＃＃スプライン
●(始点から中継点配列で)SVGスプライン描画
    始点＝「M {始点[0]},{始点[1]} 」
    追加パス＝空。
　　中継点配列を反復
　　　　点x,点y＝中継点配列[対象キー]
　　　　追加パス＝追加パス&「T {点x},{点y} 」
　　ここまで。
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでSVG連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでSVGパス描画。
ここまで。

＃＃ベジェ曲線
# 終点を配列にして複数指定すると、スプラインでつないでいく。
●(始点から制御点で終点まで|始点と終点の)SVG二次ベジェ曲線描画
    始点＝「M {始点[0]},{始点[1]} 」
    制御点＝「Q {制御点[0]},{制御点[1]} 」
    追加パス＝制御点。
    もし、(終点[0]の要素数)＝１ならば、
        追加パス＝追加パス&「{終点[0]},{終点[1]} 」
    違えば、
        終点を反復
            もし、対象キー≠0ならば、追加パス＝追加パス&「T 」。
            追加パス＝追加パス&「{対象[0]},{対象[1]} 」。
        ここまで。
    ここまで。
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでSVG連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでSVGパス描画。
ここまで。

●(始点から制御点配列で終点まで|始点と終点の)SVG三次ベジェ曲線描画
    始点＝「M {始点[0]},{始点[1]} 」
    制御点A,制御点B＝制御点配列。
    追加パス＝「C {制御点A[0]},{制御点A[1]} {制御点B[0]},{制御点B[1]} {終点[0]},{終点[1]} 」
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オンならば、追加パスでSVG連続パス追加処理して、戻る。
　　d＝始点&追加パス。
    dでSVGパス描画。
ここまで。

//連続パス描画でだけ
●(制御点で終点まで|終点と)SVG三次ベジェ曲線続ける
    もし、SVGパス作成情報["連続パス作成中フラグ"]＝オフならば、戻る。
    もし、(終点[0]の要素数)＝1ならば、
        追加パス＝「S {制御点[0]},{制御点[1]} {終点[0]},{終点[1]} 」
        追加パスでSVG連続パス追加処理して、戻る。
    違えば、
        (終点の要素数)回。
            終点x,終点y＝終点[回数-1]。
            制御点x,制御点y＝制御点[回数-1]。
            追加パス＝「S {制御点x},{制御点y} {終点x},{終点y} 」
            追加パスでSVG連続パス追加処理。
        ここまで。
        戻る。
    ここまで。
ここまで。
#-----------------------------------------------
＃画像描画
# 幅と高さの指定が必須ラシイ(無くても等幅で表示される気がするけどいちおう)
# https://developer.mozilla.org/ja/docs/Web/SVG/Element/image
●(xywhへURLの|xywhにURLを)SVG画像描画
    変数 [x,y,w,h]＝xywh。
    EL＝「image」のSVGエレメント作成。
    ELに{「x」:x,「y」:y,「width」:w,「height」:h,「href」:URL}をSVG属性一括設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。
#-----------------------------------------------
＃作成
●(要素種別の)SVGエレメント作成。
    EL＝「document」の「createElementNS」を['http://www.w3.org/2000/svg',要素種別]でJSメソッド実行。
    ELの「id」に「nako3-svg-{SVG要素作成個数}」をSVG属性設定。
    SVG要素作成個数＝SVG要素作成個数+1。
    ELを戻す。
ここまで。

#-----------------------------------------------
※今のところなでしこに関数の引数省略時の設定が無いので、引数が一つだと省略がうまく働かない。
//「ｘｘ＝SVGグループ作成」はできない。
//「SVGグループ作成してｘｘに代入」はうまくいくようだが今後ダメになる可能性もある。

＃＃グループ
# グループ化。表示される。スタイルやトランスフォーム属性を指定すると一括で指定される。
●(親要素へ|親要素に)SVGグループ作成
    もし、親要素＝空ならば、親要素＝DOM親要素。
    EL＝「g」のSVGエレメント作成。
    親要素へELをDOM子要素追加。
    ELを戻す。 
ここまで。

# ここに描画したものは表示されない。参照複製(use)して使うものを定義しておく所。
# viewbox を指定でき、参照複製時、width, height を指定して拡縮できる（？）
# 基本、定義領域(defs)に作成する。
●(定義領域へ|定義領域に)SVGシンボルグループ作成
    もし、定義領域＝空ならば、定義領域＝DOM親要素。
    EL＝「symbol」のSVGエレメント作成。
    定義領域へELをDOM子要素追加。
    ELを戻す。
ここまで。

# シンボルグループやスタイルシートなど実際に描画しないものを定義しておく所。
# 参照される要素は可能な限り、ここに入れておけとゆうことラシイ（？）
●(親要素へ|親要素に)SVG定義領域作成
    もし、親要素＝空ならば、親要素＝DOM親要素。
    EL＝「defs」のSVGエレメント作成。
    親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。
#-----------------------------------------------
＃＃参照複製
# 参照元の塗り色や線色や変形は継承されて上書き出来ないので気を付ける。
# 参照元は、シンボルグループの中に、スタイル属性やトランスフォーム属性は基本付けず作成。
# 色関係の変数には空を設定しておく。
# use(https://developer.mozilla.org/ja/docs/Web/SVG/Element/use)
●(svgを)SVG参照複製
    ID＝svgの「id」をSVG属性取得。
    EL＝「use」のSVGエレメント作成。
    ELの「href」に「#{ID}」をSVG属性設定。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。
#-----------------------------------------------
＃＃その他の要素
# 一応何でも作れるようにしておく
●(要素種別の)SVG要素作成。
    EL＝要素種別のSVGエレメント作成。
    DOM親要素へELをDOM子要素追加。
    ELを戻す。
ここまで。
#-----------------------------------------------
＃設定と取得
# なでしこのDOM属性設定、取得命令では、SVGはできない。
# 「setAttribute」でいいのか「setAttributeNS」が正しいのか、なやむー。
●(svgの属性に値を|属性へ)SVG属性設定
    もし、(DOM和スタイルに属性が辞書キー存在）ならば、属性＝DOM和スタイル[属性]。
    もし、(DOM和スタイルに値が辞書キー存在）ならば、値＝DOM和スタイル[値]。
    svgの「setAttributeNS」を[NULL,属性,値]でJSメソッド実行。
ここまで。

●(svgに|svgへ設定を)SVG属性一括設定
    設定を反復
        属性＝対象キー。値＝対象。
        svgの属性に値をSVG属性設定。
    ここまで。
ここまで。

●(svgの属性を|属性から)SVG属性取得
    もし、(DOM和スタイルに属性が辞書キー存在）ならば、属性＝DOM和スタイル[属性]。
    svgの「getAttributeNS」を[NULL,属性]でJSメソッド実行。
ここまで。
#-----------------------------------------------
＃＃描画初期設定
#描画要素作成時に使う一括設定。
# スタイルやトランスフォームは直接指定すると、
# 　・優先順位によりクラスでの指定が効かなくなる。
# 　・参照複製時にも継承されて上書きできない。
# 　そうゆう用途の場合は、空またはデフォルト値にしておくことで設定しないようにする。
●(svgに設定を)SVG描画初期設定
    設定を反復
        属性＝対象キー。値＝対象。デフォルト値＝SVGデフォルト値一覧[属性]。
        もし、(値≠デフォルト値)かつ(値!==空)ならば、svgの属性に値をSVG属性設定。
    ここまで。
ここまで。
#-----------------------------------------------
＃＃描画スタイル設定
#なでしこのキャンバスの描画と同様、これから描画するやつに適用される。
●(Vに|Vへ)SVG線色設定
    SVG描画設定情報["線"]["stroke"]＝V。
ここまで。

●(Vに|Vへ)SVG塗色設定
    SVG描画設定情報["塗"]["fill"]＝V。
ここまで。

●(Vに|Vへ)SVG線太設定
    SVG描画設定情報["線"]["stroke-width"]＝V。
ここまで。

# [線透明度,塗り透明度]。値が一つの時は同じになる。
●(Vに|Vへ)SVG透明度設定
    線,塗＝V。
    もし、塗＝未定義ならば、塗＝V。
    SVG描画設定情報["線"]["stroke-opacity"]＝線。
    SVG描画設定情報["塗"]["fill-opacity"]＝塗。
ここまで。

●(Vに|Vへ)SVG線端形状設定
    もし、(DOM和スタイルにVが辞書キー存在）ならば、V＝DOM和スタイル[V]。
    SVG描画設定情報["線"]["stroke-linecap"]＝V。
ここまで。

●(Vに|Vへ)SVG角形状設定
    もし、(DOM和スタイルにVが辞書キー存在）ならば、V＝DOM和スタイル[V]。
    SVG描画設定情報["線"]["stroke-linejoin"]＝V。
ここまで。

＃＃フォント設定
●(Vに|Vへ)SVG文字フォント設定
    SVG描画設定情報["文字"]["font-family"]＝V。
ここまで。

●(Vに|Vへ)SVG文字太さ設定
    SVG描画設定情報["文字"]["font-weight"]＝V。
ここまで。

●(Vに|Vへ)SVG文字サイズ設定
    SVG描画設定情報["文字"]["font-size"]＝V。
ここまで。
#-----------------------------------------------
＃＃破線・点線
●(Aに|Aへ)SVG破線パターン設定
    もし、(Aの変数型確認)＝「object」でなければ、
        SVG線太さ＝SVG描画設定情報["線"]["stroke-width"]。
        「端切」にSVG線端形状設定。
        Aで条件分岐
            「丸点線」ならば、
                「丸」にSVG線端形状設定。
                A＝「1 {SVG線太さ*2}」。
            ここまで。
            「細点線」ならば、A＝SVG線太さ。。。
            「点線」ならば、A＝SVG線太さ*2。。。
            「破線」ならば、A＝「{SVG線太さ*4} {SVG線太さ*2}」。。。
            「一点鎖線」ならば、A＝「{SVG線太さ*6} {SVG線太さ*2} {SVG線太さ*2} {SVG線太さ*2}」。。。
            「中長破線」ならば、A＝「{SVG線太さ*6} {SVG線太さ*2}」。。。
            「長破線」ならば、A＝「{SVG線太さ*8} {SVG線太さ*2}」。。。
            「長鎖線」ならば、A＝「{SVG線太さ*8} {SVG線太さ*2} {SVG線太さ*2} {SVG線太さ*2}」。。。
            「二点鎖線」ならば、A＝「{SVG線太さ*8} {SVG線太さ*2} {SVG線太さ*2} {SVG線太さ*2} {SVG線太さ*2} {SVG線太さ*2}」。。。
            違えば、A＝「」。。。
    　　ここまで。
　　ここまで。
　　SVG描画設定情報["線"]["stroke-dasharray"]＝A。
ここまで。
#-----------------------------------------------

#-----------------------------------------------
＃変形
#キャンバスのとは違い今あるSVGを変化させる。グループ(g)などに適用すれば、まとめて変化させられる。
# transform(https://developer.mozilla.org/ja/docs/Web/SVG/Attribute/transform)
#-----------------------------------------------
●(svgをAだけ|Aに|Aへ)SVG描画変換マトリクス設定
    svgの「transform」に「matrix({A[0]},{A[1]},{A[2]},{A[3]},{A[4]},{A[5]})」をSVG属性設定。
ここまで。

●(svgをAだけ|Aに|Aへ)SVG描画変換マトリクス追加
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    svgの「transform」に「{既存値} matrix({A[0]},{A[1]},{A[2]},{A[3]},{A[4]},{A[5]})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

# Translateを追加ではなく先頭で行うことで変形してるやつも見た目通りに移動する。
●(svgをXYだけ|XYに|XYへ)SVG描画起点移動　# Translate
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    X,Y＝XY。
    もし、Y＝未定義ならば、Y=0。
    svgの「transform」に「translate({X},{Y}) {既存値}」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgをXYだけ|XYに|XYへ)SVG描画移動　# Translate
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    X,Y＝XY。
    もし、Y＝未定義ならば、Y=0。
    svgの「transform」に「{既存値} translate({X},{Y})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgをXYだけ|XYに|XYへ)SVG描画拡大　# Scale
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    X,Y＝XY。
    もし、Y＝未定義ならば、Y=X。
    svgの「transform」に「{既存値} scale({X},{Y})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgをAだけ|Aに|Aへ)SVG描画回転　# Rotate
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    A,CX,CY=A。
    もし、(CX≠未定義)かつ(CY≠未定義)ならば、A=「{A},{CX},{CY}」
    svgの「transform」に「{既存値} rotate({A})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgをAだけ|Aに|Aへ)SVG描画傾斜X　# SkewX
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    svgの「transform」に「{既存値} skewX({A})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgをAだけ|Aに|Aへ)SVG描画傾斜Y　# SkewY
    既存値＝svgの「transform」をSVG属性取得。
    もし、既存値＝NULLならば、既存値＝空。
    svgの「transform」に「{既存値} skewY({A})」をSVG属性設定。
    svgのSVG変換マトリクス統合。
ここまで。

●(svgの)SVG描画変形削除　# transform属性の内容を破棄。
    svgの「transform」に空をSVG属性設定。
ここまで。

●(svgの)SVG変換マトリクス統合
    変形リスト＝svg["transform"]["baseVal"]。
    変形リスト要素数＝変形リスト["numberOfItems"]。
    仮SVG＝「document」の「createElementNS」を['http://www.w3.org/2000/svg','svg']でJSメソッド実行。
    MTX＝仮SVGの「createSVGMatrix」を空でJSメソッド実行。
    変形リスト要素数回
        変形リストの「getItem」を回数-1でJSメソッド実行。
        MTX=MTXの「multiply」をそれ["matrix"]でJSメソッド実行。
    ここまで。
    matrix＝「matrix({MTX["a"]},{MTX["b"]},{MTX["c"]},{MTX["d"]},{MTX["e"]},{MTX["f"]})」
    svgの「transform」にmatrixをSVG属性設定。
ここまで。

●(svgの)CTM取得　# Current Transformation Matrix
    CTM=svgの「getCTM」を空でJSメソッド実行。
    「matrix({CTM["a"]},{CTM["b"]},{CTM["c"]},{CTM["d"]},{CTM["e"]},{CTM["f"]})」を戻す。
ここまで。
#-----------------------------------------------
もし、プラグイン名＝「メイン」ならば、
    [100,100]のSVG親要素作成。
    「pink」にSVG塗り色設定。
    [50,50]へ30のSVG円描画。
    黒色にSVG塗り色設定。20にSVG文字サイズ設定。
    [50,10]へ「なでしこ」をSVG縦書き文字描画。
ここまで。

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] SVG画像を描画するプラグイン

素材のアップロード