SVGで後手の駒を書いてみる

以前作ったGitHub - koji-hirono/shogi-viewのソースコードをベースに試してみる。成銀はscaleを使って１文字分のサイズに圧縮するという細かい技を使っている。

香 

  <svg width="30" height="30" viewBox="0 0 30 30">
    <g transform="rotate(180) translate(-30,-30)">
      <text x="50%" y="0" font-size="30"
        dominant-baseline="central"
        writing-mode="tb"
        font-weight="normal"
        transform="scale(1,1)"
        fill="black">香</text>
    </g>
  </svg>

成銀 

  <svg width="30" height="30" viewBox="0 0 30 30">
    <g transform="rotate(180) translate(-30,-30)">
      <text x="50%" y="0" font-size="30"
        dominant-baseline="central"
        writing-mode="tb"
        font-weight="normal"
        transform="scale(1,0.5)"
        fill="black">成銀</text>
    </g>
  </svg>