SVG. Center the text inside <g> tag

user_10580653 0
Viewed 482

There is an auto-generated image with a chess board, pieces in squares are displayed using utf-8 misc symbols, so they are text, each square is a group <g> tag, which contains:

  • <rect>,
  • <path> - border
  • and <text></text>, if there is a piece inside a square

Here is svg markup, for convinience I left two squares and removed border symbols:

<svg id="chessBoard"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567.93 567.93">
<defs>
    <style>
    .cls-1{fill:#a73a2f;stroke:#a73a2f;stroke-miterlimit:10;}
    .cls-2{fill:#83261d;}.cls-3{fill:#f2c48d;}
    .wp{font-size:50px;letter-spacing:0em;fill:#c38748}
    .bp{font-size:50px;letter-spacing:0em;fill:#150503}
    </style>
</defs>
<rect id="border" class="cls-1" x="0.5" y="0.5" width="566.93" height="566.93"/>
<g id="B1">
    <!--B1-->
    <rect class="cls-2" x="114.62" y="454.78" width="55.22" height="55.21"/>
    <path class="cls-2" d="M176.86,461.76v53.73H123.13V461.76h53.73m1.48-1.48H121.65V517h56.69V460.28Z" transform="translate(-7.76 -6.23)"/>
    <text class="bp" transform="translate(117.62 501.78)">&#x265C;</text>
</g>
<g id="A1">
    <!--A1-->
    <rect class="cls-3" x="57.69" y="454.54" width="55.69" height="55.69"/>
    <path class="cls-3" d="M120.65,461.28V516H66V461.28h54.69m1-1H65V517h56.69V460.28Z" transform="translate(-7.76 -6.23)"/>
    <text class="bp" transform="translate(60.69 501.54)">&#x265C;</text>
</g>
</svg>

The question is how is it possible to align text, hence the pieces, to the center of a sqaure <g> tag, in a way that does not involve changing 64 numbers in translate().

Thank you for your help.

svg xml
1 Answers

The simplest approach IMO is to have a simple standard square design. Make it so that the thing sits at the origin (0, 0), and then move the whole group to its final position. That way every square is the same apart from class and text content.

The piece position problem is easily solved now. Every <text> element has the same x and y, and you use text-anchor="middle" to centre the piece horizontally. The height works fine because all the pieces are the same height (more or less).

<svg id="chessBoard"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 567.93 567.93">
<defs>
    <style>
    .cls-1{fill:#a73a2f;stroke:#a73a2f;stroke-miterlimit:10;}
    .cls-2{fill:#83261d;}.cls-3{fill:#f2c48d;}
    .wp{font-size:50px;letter-spacing:0em;fill:#c38748}
    .bp{font-size:50px;letter-spacing:0em;fill:#150503}
    </style>
</defs>
<rect id="border" class="cls-1" x="0.5" y="0.5" width="566.93" height="566.93"/>
<g id="B1" transform="translate(114.62, 454.54)">
    <!--B1-->
    <rect class="cls-2" width="55.69" height="55.69"/>
    <text class="bp" x="27.85" y="47" text-anchor="middle">&#x265C;</text>
</g>
<g id="A1" transform="translate(57.69, 454.54)">
    <!--A1-->
    <rect class="cls-3" width="55.69" height="55.69"/>
    <text class="bp" x="27.85" y="47" text-anchor="middle">&#x265A;</text>
</g>
</svg>

user_12928480
Related