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中的字母间距相同。我所做的是添加文本转换：letter-spacing =＆＃34; 9.691＆＃34;正文长度=＆＃34; 780px＆＃34;并调整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为中心

2 个答案: