前回の続きです 横書きに表示されている文字をタテに表示するというのを挑戦してます。 今回は SVG を利用しているので、ほぼ全てが座標で表現されます。 こんな感じ↓ ブラウザで座標を考える場合 (0, 0) が左上になり、それよりも外側はブラウザの表示の外になります。 そこで、「美しい日本語」という文字列を (0, 0) からレンダリングするとこんな感じになります。 単純に考えれば、この文字列を 90° 垂直に回転 させれば、タテに表示されそうですがそうもいきません。 文字列を (0, 0) にレンダリングしてしまったので、そのまま回転させてしまうと、画面の外に出てしまいます。 ちなみに、SVG の回転は transform(rotate) を使うんですが、rotateの引数に rotate(rangle, cx, cy) と X座標(cx) と Y座標(cy) の回転位置を