最近のトラックバック

2018年8月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

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

2018-05-20

svg で 将棋盤を書く( ソース)

以下に svg のソースを上げておく。前の説明とはすこし違っている 。

グラデーションを付けているし、polygon でなく rect を使っているし、ベースラインは 0.85 だ。 昔のソースを貼り付けてしまったようだった。

<svg width="400pt" height="400pt" viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<symbol id="grid" stroke="black">
    <defs>
        <linearGradient gradientUnits="userSpaceOnUse" id="lg0" x1="9" y1="1" x2="1" y2="9" spreadMethod="pad">
            <stop offset="0%" stop-color="lightgreen"/>
            <stop offset="100%" stop-color="aqua"/>
        </linearGradient>
    </defs>

  <rect x="1" y="1" width="9" height="9" stroke-width="0.08"  fill="url(#lg0)" />
  <g  stroke-width="0.02">
    <line x1="1" y1="2" x2="10" y2="2" />
    <line x1="1" y1="3" x2="10" y2="3" />
    <line x1="1" y1="4" x2="10" y2="4" />
    <line x1="1" y1="5" x2="10" y2="5" />
    <line x1="1" y1="6" x2="10" y2="6" />
    <line x1="1" y1="7" x2="10" y2="7" />
    <line x1="1" y1="8" x2="10" y2="8" />
    <line x1="1" y1="9" x2="10" y2="9" />
    <line x1="2" y1="1" x2="2"  y2="10" />
    <line x1="3" y1="1" x2="3"  y2="10" />
    <line x1="4" y1="1" x2="4"  y2="10" />
    <line x1="5" y1="1" x2="5"  y2="10" />
    <line x1="6" y1="1" x2="6"  y2="10" />
    <line x1="7" y1="1" x2="7"  y2="10" />
    <line x1="8" y1="1" x2="8"  y2="10" />
    <line x1="9" y1="1" x2="9"  y2="10" />
  </g>
  <g fill="black" stroke-width="0.08" >
    <circle cx="4" cy="4" r="0.04" />
    <circle cx="7" cy="4" r="0.04" />
    <circle cx="4" cy="7" r="0.04" />
    <circle cx="7" cy="7" r="0.04" />
  </g>
</symbol>

<symbol id="K" >
<text x="10" y="0.85">玉</text>
</symbol>

<symbol id="R" >
<text x="10" y="085">飛</text>
</symbol>

<symbol id="B" >
<text x="10" y="0.85">角</text>
</symbol>

<symbol id="G" >
<text x="10" y="0.85">金</text>
</symbol>

<symbol id="S" >
<text x="10" y="0.85">銀</text>
</symbol>

<symbol id="N" >
<text x="10" y="0.85">桂</text>
</symbol>

<symbol id="L" >
<text x="10" y="0.85">香</text>
</symbol>

<symbol id="P" >
<text x="10" y="0.85">歩</text>
</symbol>

<symbol id="D" >
<text x="10" y="0.85">龍</text>
</symbol>

<symbol id="M" >
<text x="10" y="0.85">馬</text>
</symbol>

<symbol id="Z" >
<text x="10" y="0.85">全</text>
</symbol>

<symbol id="Y" >
<text x="10" y="0.85">圭</text>
</symbol>

<symbol id="X" >
<text x="10" y="0.85">杏</text>
</symbol>

<symbol id="T" >
<text x="10" y="0.85">と</text>
</symbol>

<symbol id="k" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">玉</text>
</symbol>

<symbol id="r" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">飛</text>
</symbol>

<symbol id="b" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">角</text>
</symbol>

<symbol id="g" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">金</text>
</symbol>

<symbol id="s" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">銀</text>
</symbol>

<symbol id="n" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">桂</text>
</symbol>

<symbol id="l" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">香</text>
</symbol>

<symbol id="p" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">歩</text>
</symbol>

<symbol id="d" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">竜</text>
</symbol>

<symbol id="m" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">馬</text>
</symbol>

<symbol id="z" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">全</text>
</symbol>

<symbol id="y" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">圭</text>
</symbol>

<symbol id="x" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">杏</text>
</symbol>

<symbol id="t" >
<text x="11" y="-0.15" transform="rotate(180, 11, 0)">と</text>
</symbol>

<use xlink:href="#grid" />

<g font-size="1" font-family="serif" fill="black">
<use xlink:href="#l" x="-1" y="1" />
<use xlink:href="#s" x="-4" y="2" />
<use xlink:href="#k" x="-1" y="2" />
<use xlink:href="#S" x="-3" y="3" />
<use xlink:href="#p" x="-1" y="3" />
<use xlink:href="#p" x="-4" y="4" />
<use xlink:href="#d" x="-2" y="4" />
<use xlink:href="#p" x="-2" y="5" />

<use xlink:href="#B" x="0" y="6" />
<use xlink:href="#B" x="0" y="7" />
<use xlink:href="#S" x="0" y="8" />
<use xlink:href="#S" x="0" y="9" />
</g>

</svg>

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

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

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: svg で 将棋盤を書く( ソース):

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