背景
之前给大家介绍了H5新增的Canvas标签对中国象棋进行可视化操作，但是其有一个致命的缺点，就是放大缩小的时候容易失真，于是我最近研究了一下矢量图的方式进行可视化操作
代码
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 500">
<defs>
<g id="x">
<path stroke="black" fill="none"
d="m -3 -3 l 0 -9 m 0 9 l -9 0 m 0 6 l 9 0 m 0 0 l 0 9 m 6 0 l 0 -9 m 0 0 l 9 0 m 0 -6 l -9 0 m 0 0 l 0 -9 z " />
</g>
<g id="xl">
<path stroke="black" fill="none" d="m -3 -3 l 0 -9 m 0 9 l -9 0 m 0 6 l 9 0 m 0 0 l 0 9 z" />
</g>
<g id="xr">
<path stroke="black" fill="none" d="m 3 -3 l 0 -9 m 0 9 l 9 0 m 0 6 l -9 0 m 0 0 l 0 9 z" />
</g>
<g id="r">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">車</text>
</g>
<g id="n">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">馬</text>
</g>
<g id="b">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">象</text>
</g>
<g id="a">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">士</text>
</g>
<g id="k">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">將</text>
</g>
<g id="c">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">炮</text>
</g>
<g id="p">
<circle r="23" fill="orange" />
<circle r="20" fill="black" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">卒</text>
</g>
<g id="R">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">車</text>
</g>
<g id="N">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">馬</text>
</g>
<g id="B">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">相</text>
</g>
<g id="A">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">仕</text>
</g>
<g id="K">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">帥</text>
</g>
<g id="C">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">炮</text>
</g>
<g id="P">
<circle r="23" fill="#2B73AF" />
<circle r="20" fill="#82111F" />
<text x="-16" y="12" fill="white" font-size="32" font-family="楷体">兵</text>
</g>
</defs>
<g transform="translate(0,0)" id="board">
<path stroke="black" fill="none"
d="m 25 25 l 400 0 m 0 0 l 0 450 m 0 0 l -400 0 m 0 0 l 0 -450 m 0 50 l 400 0 m 0 50 l -400 0 m 0 50 l 400 0 m 0 50 l -400 0 m 0 50 l 400 0 m 0 50 l -400 0 m 0 50 l 400 0 m 0 50 l -400 0 m 0 50 l 400 0 m -50 0 l 0 -200 m -50 0 l 0 200 m -50 0 l 0 -200 m -50 0 l 0 200 m -50 0 l 0 -200 m -50 0 l 0 200 m -50 0 l 0 -200 m 0 -50 l 0 -200 m 50 0 l 0 200 m 50 0 l 0 -200 m 50 0 l 0 200 m 50 0 l 0 -200 m 50 0 l 0 200 m 50 0 l 0 -200 m -100 0 l -100 100 m 0 -100 l 100 100 m 0 250 l -100 100 m 100 0 l -100 -100 z" />
<use xlink:href="#x" transform="translate(75,125)" />
<use xlink:href="#x" transform="translate(375,125)" />
<use xlink:href="#x" transform="translate(75,375)" />
<use xlink:href="#x" transform="translate(375,375)" />
<use xlink:href="#x" transform="translate(125,175)" />
<use xlink:href="#x" transform="translate(225,175)" />
<use xlink:href="#x" transform="translate(325,175)" />
<use xlink:href="#x" transform="translate(125,325)" />
<use xlink:href="#x" transform="translate(225,325)" />
<use xlink:href="#x" transform="translate(325,325)" />
<use xlink:href="#xr" transform="translate(25,175)" />
<use xlink:href="#xr" transform="translate(25,325)" />
<use xlink:href="#xl" transform="translate(425,175)" />
<use xlink:href="#xl" transform="translate(425,325)" />
<text transform="translate(90,260)" fill="black" font-size="28" font-family="楷体"
font-family="arial,sans-serif">楚 河</text>
<text transform="translate(290,260)" fill="black" font-size="28" font-family="楷体"
font-family="arial,sans-serif">汉 界</text>
<use xlink:href="#r" transform="translate(25,25)" />
<use xlink:href="#n" transform="translate(75,25)" />
<use xlink:href="#b" transform="translate(125,25)" />
<use xlink:href="#a" transform="translate(175,25)" />
<use xlink:href="#k" transform="translate(225,25)" />
<use xlink:href="#a" transform="translate(275,25)" />
<use xlink:href="#b" transform="translate(325,25)" />
<use xlink:href="#n" transform="translate(375,25)" />
<use xlink:href="#r" transform="translate(425,25)" />
<use xlink:href="#c" transform="translate(75,125)" />
<use xlink:href="#c" transform="translate(375,125)" />
<use xlink:href="#p" transform="translate(25,175)" />
<use xlink:href="#p" transform="translate(125,175)" />
<use xlink:href="#p" transform="translate(225,175)" />
<use xlink:href="#p" transform="translate(325,175)" />
<use xlink:href="#p" transform="translate(425,175)" />
<use xlink:href="#R" transform="translate(25,475)" />
<use xlink:href="#N" transform="translate(75,475)" />
<use xlink:href="#B" transform="translate(125,475)" />
<use xlink:href="#A" transform="translate(175,475)" />
<use xlink:href="#K" transform="translate(225,475)" />
<use xlink:href="#A" transform="translate(275,475)" />
<use xlink:href="#B" transform="translate(325,475)" />
<use xlink:href="#N" transform="translate(375,475)" />
<use xlink:href="#R" transform="translate(425,475)" />
<use xlink:href="#C" transform="translate(75,375)" />
<use xlink:href="#C" transform="translate(375,375)" />
<use xlink:href="#P" transform="translate(25,325)" />
<use xlink:href="#P" transform="translate(125,325)" />
<use xlink:href="#P" transform="translate(225,325)" />
<use xlink:href="#P" transform="translate(325,325)" />
<use xlink:href="#P" transform="translate(425,325)" />
</g>
</svg>
效果
