SVG 文本不居中 firefox

Question

我有一个带文字的 SVG 徽标，文字居中。这在 chrome 和 IE 中运行良好，但在 Firefox 中运行良好，文本稍微向左移动。

<text transform="matrix(0.9287 0 0 1 60.9023 137.7646)">
    <tspan x="0" y="0" fill="#FFFFFF" stroke="#FAFAF8" stroke-miterlimit="10" font-family="'Consolas'" font-size="71.5163" letter-spacing="9.691">SOC</tspan>
    <tspan x="-24.809" y="85.819" fill="#FFFFFF" stroke="#FAFAF8" stroke-miterlimit="10" font-family="'Consolas'" font-size="71.5163" letter-spacing="9.691">KING</tspan>
</text>

请帮忙。

Answer 1

使用text-anchor="middle"使文本居中（然后它的x坐标指向中心）

Answer 2

好的，所以我想出了一个变通办法，使 chrome 和 firefox 中的字母间距相同。我所做的是将两者都添加到 text-transform: letter-spacing="9.691" textLength="780px" 并调整 x 直到两个浏览器都在图像中心显示文本。它不漂亮，但它有效。

 <text transform="matrix(0.9287 0 0 1 60.9023 137.7646)" letter-spacing="9.691" textLength="780px" font-weight="bold">
        <tspan x="1" y="0" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">SOC</tspan>
        <tspan x="-21.8" y="85.819" fill="#FFFFFF" font-family="'Consolas'" font-size="71.5163">KING</tspan>
    </text>

SVG 文本不居中 firefox

SVG text not centering firefox

html

css

firefox

svg