Question

我在mozilla firefox中遇到属性问题。在歌剧和谷歌铬文本显示在svg的中心，但在mozilla不是。 y cordinate工作正常，但x cordinate未命中。

http://awtest.alterway.info/＆lt;＆lt;这是我们的网站链接，请在google，opera和mozilla firefox中看到它，你会猜到它的区别。如果你知道如何纠正这个问题，请帮助:)

Answer 1

摆脱<text>元素中不必要的空格。这是一个Chrome错误，不支持xml：space，因为Opera 12显示与Firefox相同。

Answer 2

你有两个选择。你可以保留一个，但不是两个：

xml:space="preserve"属性
或<tspan>之前和之后的空格。

如果要保留XML格式/缩进，请删除xml:space属性。

        <svg  version="1.1" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 640 480">
        <circle fill="#05aabb"  cx="320" cy="240" r="126.5"/>
        <text x="255" y="260" font-family="Verdana" font-size="40" fill="white" style="text-decoration: underline;">
        <tspan x="255">WORK</tspan>
        </text>
        </svg>

Demo here

此外：

enable-background属性是不必要的。
padding在SVG上下文中毫无意义。

在mozilla firefox中的文本元素中额外加下划线

2 个答案: