xml - SVG。将文本置于 <g> 标记内居中

Question

有一个自动生成的棋盘图像，方 block 中的棋子使用utf-8杂项符号显示，因此它们是文本，每个方 block 是一组 <g>标签，其中包含:

• <rect> ,
• <path> - 边框
• 和<text></text> ，如果正方形内有一 block

这是 svg 标记，为了方便起见，我留下了两个方 block 并删除了边框符号:

<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>

问题是如何将文本(即片段)对齐到正方形的中心 <g>标签，以不涉及更改 translate() 中的 64 个数字的方式.

感谢您的帮助。

Answer 1

在我看来，最简单的方法是采用简单的标准方形设计。使该物体位于原点 (0, 0)，然后将整个组移动到其最终位置。 这样，除了 class 之外，每个方格都是相同的和文本内容。

棋子位置问题现在很容易解决了。每<text>元素具有相同的 x和y ，然后您使用 text-anchor="middle"将工件水平居中。高度效果很好，因为所有部件的高度相同(或多或少)。

<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>