« スピリッツ 目次 2012年 11月 12日号 NO. 48 | トップページ | スピリッツ 目次 2012年 11月 19日号 NO. 49 »

2018-05-21

svg で 将棋盤を書く (シンプル)

前に挙げたのは、共通部分を再利用するというようなことであったらしいのだが、もっとシンプルな書き方をしてみた。図枠は path を使って書いて、駒は svg の座標を使って書き、玉方の駒は回転して移動した分だけ動かすということだった。なにも、将棋の座標にこだわらなくてもいいわけだった。

<svg width="300pt" height="300pt" viewBox="0 -1 11 13"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<g stroke="brown">
  <path stroke-width="0.08" 
    d="M0.95 0.18 h9 v9 h-9 v-9 Z" fill="none" />
  <path stroke-width="0.02" 
    d="M0.95 1.18 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9
        m-8 -8 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9">
</g>

<g font-size="0.9" font-family="serif monospace">
<text x="3 1 7 5 6 5 8" y="3 5 6 8 8 9 9">と飛桂馬歩香香</text>
<text x="6 5 6 6" y="3 4 4 6" rotate="180" transform="translate(0.9,-0.64)">銀玉歩桂</text>
<text x="10 10 10 10 10" y="5 6 7 8 9">持駒 なし</text>
</g>
</svg>

と飛桂馬歩香香 銀玉歩桂 持駒 なし

« スピリッツ 目次 2012年 11月 12日号 NO. 48 | トップページ | スピリッツ 目次 2012年 11月 19日号 NO. 49 »

「パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/148337/66745136

この記事へのトラックバック一覧です: svg で 将棋盤を書く (シンプル):

« スピリッツ 目次 2012年 11月 12日号 NO. 48 | トップページ | スピリッツ 目次 2012年 11月 19日号 NO. 49 »