!『https://n3s.nadesi.com/plain/SVG.nako3』を取り込む。# SVG描画 !「https://n3s.nadesi.com/plain/bunsyo-seikei.nako3」を取り込む。# 行揃え 描画中キャンバスの「高さ」に0をDOM属性設定。 ＃SVG作成 縦書きテスト＝[300,300]のSVG親要素作成。 ウェブフォント指定＝縦書きテストにSVG定義領域作成。 ＃ウェブフォント設定 ウェブフォント指定に「<style> @font-face {波カッコ} font-family: "衡山毛筆フォント_web"; src: url("https://snowdrops89.github.io/font/Musashi/KouzanMouhituFont.woff") format('woff'); {波カッコ閉じ} </style>」をHTML設定。 ＃文章 文章＝『「撫子を飽かでも、この人びとの立ち去りぬるかな。いかで大臣にも、この花園見せたてまつらむ。世もいと常なきをと思ふに、いにしへも、もののついでに語り出でたまへりしも、ただ今のこととぞおぼゆる」 　とて、すこしのたまひ出でたるにも、いとあはれなり。 源氏…なでしこのとこなつかしき色を見ば 　　　　　もとの垣根を人やたづねむ 「このことのわづらはしさにこそ、繭ごもりも心苦しう思ひきこゆれ」 　と、のたまふ。君、うち泣きて―― 玉鬘…山がつの垣ほに生ひしなでしこの 　　　　　もとの根ざしをたれかたづねん 　はかなげに聞こえないたまへるさま、げにいとなつかしく若やかなり。』 ＃設定 行文字数＝20。余白＝20。行間＝8。文字間＝0。文字サイズ＝20。 フォント＝「"衡山毛筆フォント_web",serif」 フォントにSVG文字フォント設定。「{文字サイズ}px」にSVG文字サイズ設定。 文字幅＝文字サイズ。 文字高さ＝文字サイズ。 文章＝文章を行文字数で行揃え。 原稿＝文章を改行で区切る。 用紙幅＝(文字幅+行間)*((原稿の要素数)-1)+余白*2。 用紙高＝(文字高さ+文字間)*(行文字数)+余白*2。 縦書きテストの「幅」に用紙幅をSVG属性設定。 縦書きテストの「高さ」に用紙高さをSVG属性設定。 縦書きテストの「viewBox」に「0 0 {用紙幅} {用紙高}」をSVG属性設定。 描画X＝(縦書きテストの「幅」をSVG属性取得)-(文字幅/2+余白)。//xは文字の中央？ 描画Y＝余白。//yは上端？ ＃描画 ベージュ色にSVG塗り色設定。 [0,0,用紙幅,用紙高]へSVG四角描画。 黒色にSVG塗り色設定。 [描画X,描画Y]に[行間,文字間]で文章をSVG縦書き文章描画。