SVG。 <g> 标签内的文本居中答案

【问题标题】：SVG. Center the text inside <g> tagSVG。 <g> 标签内的文本居中
【发布时间】：2021-08-19 10:46:49
【问题描述】：

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

<rect>,
<path> - 边框
和<text></text>，如果方块里面有一块

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

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

问题是如何以不涉及更改 translate() 中的 64 个数字的方式将文本（因此片段）对齐到正方形 <g> 标记的中心。

感谢您的帮助。

【问题讨论】：

为什么不使用描边作为边框，路径看起来很复杂，并没有添加太多。然后，如果您转换元素，那么对于您的主要观点，所有内容对于各个部分（例如棋子）都可以相同。您可以使用和元素而不是
仅供参考，用于创建一个完全交互式的 HTML5 Chessboard 一个 HTML 标签就足够了：`` `` chessmeister.github.io 创建当您想要添加拖放时，整个板在 SVG 中 很痛苦.. 使用位于 CSS 网格中的 HTML 节点要容易得多
定位文本；在正方形内添加 100% 宽度的路径；然后使用textPath 定位：stackoverflow.com/questions/67291003/… 并且，如前所述，在 CSS 网格中创建 64 个 SVG 更容易

标签： xml svg

【解决方案1】：

IMO 最简单的方法是采用简单的标准方形设计。使其位于原点 (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>

【讨论】：

非常感谢您提供的这个解决方案，效果很好，无疑为我节省了很多时间。