SVG文本不居中firefox答案

【问题标题】：SVG text not centering firefoxSVG文本不居中firefox
【发布时间】：2015-04-28 19:52:04
【问题描述】：

我有一个带有文本的 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>

请帮忙。

【问题讨论】：

Firefox 具有不同的转换源基础。有许多与此问题相关的问题。 - 检查左侧的相关问题。
好的，谢谢看看相关的。希望我能在那里找到一些东西。
Firefox 尚不支持 SVG 文本的字母间距 CSS 属性。
@Robert 是的，你说得对，它是 letter-spacing 属性。我尝试了各种尺寸的 font-kerning="inherit/ auto/ normal/ none" 和 textLength="" ，在 chrome 中工作，而不是在 firefox 中工作。最后我删除了字母间距属性并调整了我的 x 和 y。我可能会稍后再试一次。
字距调整已过时，将在 SVG 2 中删除。textLength 有效，但仅适用于文本元素。

标签： html css firefox svg

【解决方案1】：

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

【讨论】：

text-anchor="middle" 适用于 chrome（调整 x 值）中间 chrome ！= 中间 firefox。尝试添加 & 标签。然后当我尝试使用 letter-space 或 textLength - 我在 chrome、IE 但不是 Firefox 中正确（更改 x 值）。我的问题是如何在 Firefox 中为 SVG 文本添加字母空间（字距调整）。 SOCKING

【解决方案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>

【讨论】：