SVG 文本未居中火狐浏览器

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中的字母间距相同。我所做的是将两者添加到文本转换中：字母间距="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>