Выравнивание текста в svg по центру g тэга

Question

Существует автогенерированное изображение с шахматной доской:

фигуры в клетках отображены с помощью utf-8 misc symbols, то есть это текст, каждая клетка это group <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>

Вопрос в том каким образом можно выровнять текст, то есть фигуры по центру группы, таким образом что бы не менять 64 числа в translate().

Большое спасибо за помощь.

_{Свободный перевод вопроса SVG. Center the text inside tag от участника @Mykhail Kosiuk.}

Answer 1

Получил ответ на stackoverflow.com, спасибо Paul LeBeau.

Самый простой подход - создать простой дизайн клетки. Сделайте так, чтобы объект находился в начале координат (0, 0), а затем переместите всю группу <g> в ее окончательное положение. Таким образом, каждая клетка будет одинаковой, кроме класса и текстового содержимого.

Проблема с позицией фигуры теперь решается легко. Каждый элемент <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>

_{Свободный перевод ответа от участника @Paul LeBeau.}

БЛОГ НА HUSL

Выравнивание текста в svg по центру g тэга

Ответы (1 шт):