Skip to content

Instantly share code, notes, and snippets.

@kits

kits/svgshogi.html

Created January 16, 2015 23:54
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kits/978c94e2e89025388cc7 to your computer and use it in GitHub Desktop.
Save kits/978c94e2e89025388cc7 to your computer and use it in GitHub Desktop.
Download ZIP
SVG将棋盤(HTML5埋め込み)
Raw
svgshogi.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>SVG将棋盤</title>
</head>
<body>
<h1>SVG将棋盤</h1>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 -9 100 100">
<style type="text/css"><![CDATA[
.ban rect,
.ban line {
stroke: #666;
stroke-width: 0.33;
}
.ban rect {
fill: none;
}
.ban text {
font-size: 6px;
text-anchor: middle;
dominant-baseline: middle;
}
.koma text {
font-size: 8px;
text-anchor: middle;
dominant-baseline: middle;
}
]]></style>
<g class="ban">
<rect x="0" y="0" width="90" height="90" />
<line x1="10" y1="0" x2="10" y2="90" />
<line x1="20" y1="0" x2="20" y2="90" />
<line x1="30" y1="0" x2="30" y2="90" />
<line x1="40" y1="0" x2="40" y2="90" />
<line x1="50" y1="0" x2="50" y2="90" />
<line x1="60" y1="0" x2="60" y2="90" />
<line x1="70" y1="0" x2="70" y2="90" />
<line x1="80" y1="0" x2="80" y2="90" />
<line x1="0" y1="10" x2="90" y2="10" />
<line x1="0" y1="20" x2="90" y2="20" />
<line x1="0" y1="30" x2="90" y2="30" />
<line x1="0" y1="40" x2="90" y2="40" />
<line x1="0" y1="50" x2="90" y2="50" />
<line x1="0" y1="60" x2="90" y2="60" />
<line x1="0" y1="70" x2="90" y2="70" />
<line x1="0" y1="80" x2="90" y2="80" />
<text x="85 75 65 55 45 35 25 15 5" y="-4">123456789</text>
<text x="95 95 95 95 95 95 95 95 95" y="5 15 25 35 45 55 65 75 85" >一二三四五六七八九</text>
</g>
<g class="koma">
<text transform="translate(5, 5) rotate(180)">香</text>
<text transform="translate(15, 5) rotate(180)">桂</text>
<text transform="translate(25, 5) rotate(180)">銀</text>
<text transform="translate(35, 5) rotate(180)">金</text>
<text transform="translate(45, 5) rotate(180)">王</text>
<text transform="translate(55, 5) rotate(180)">金</text>
<text transform="translate(65, 5) rotate(180)">銀</text>
<text transform="translate(75, 5) rotate(180)">桂</text>
<text transform="translate(85, 5) rotate(180)">香</text>
<text transform="translate(15, 15) rotate(180)">飛</text>
<text transform="translate(75, 15) rotate(180)">角</text>
<text transform="translate(5, 25) rotate(180)">歩</text>
<text transform="translate(15, 25) rotate(180)">歩</text>
<text transform="translate(25, 25) rotate(180)">歩</text>
<text transform="translate(35, 25) rotate(180)">歩</text>
<text transform="translate(45, 25) rotate(180)">歩</text>
<text transform="translate(55, 25) rotate(180)">歩</text>
<text transform="translate(65, 25) rotate(180)">歩</text>
<text transform="translate(75, 25) rotate(180)">歩</text>
<text transform="translate(85, 25) rotate(180)">歩</text>
<text transform="translate(5, 35) rotate(180) scale(1, 0.5)" x="0 0" y="-4 4">成香</text>
<text transform="translate(15, 35) rotate(180) scale(1, 0.5)" x="0 0" y="-4 4">成桂</text>
<text transform="translate(25, 35) rotate(180) scale(1, 0.5)" x="0 0" y="-4 4">成銀</text>
<text transform="translate(45, 35) rotate(180)">と</text>
<text transform="translate(45, 55)">と</text>
<text transform="translate(65, 55) scale(1, 0.5)" x="0 0" y="-4 4">成銀</text>
<text transform="translate(75, 55) scale(1, 0.5)" x="0 0" y="-4 4">成桂</text>
<text transform="translate(85, 55) scale(1, 0.5)" x="0 0" y="-4 4">成香</text>
<text transform="translate(5, 65)">歩</text>
<text transform="translate(15, 65)">歩</text>
<text transform="translate(25, 65)">歩</text>
<text transform="translate(35, 65)">歩</text>
<text transform="translate(45, 65)">歩</text>
<text transform="translate(55, 65)">歩</text>
<text transform="translate(65, 65)">歩</text>
<text transform="translate(75, 65)">歩</text>
<text transform="translate(85, 65)">歩</text>
<text transform="translate(15, 75)">角</text>
<text transform="translate(75, 75)">飛</text>
<text transform="translate(5, 85)">香</text>
<text transform="translate(15, 85)">桂</text>
<text transform="translate(25, 85)">銀</text>
<text transform="translate(35, 85)">金</text>
<text transform="translate(45, 85)">玉</text>
<text transform="translate(55, 85)">金</text>
<text transform="translate(65, 85)">銀</text>
<text transform="translate(75, 85)">桂</text>
<text transform="translate(85, 85)">香</text>
</g>
</svg>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment