Question

我注意到浏览器在显示强制从右到左的文本和使用text-anchor =“end”之间存在差异。

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" > 

    <text x="10" y="50" font-size="30" font-family="sans-serif" writing-mode="rl" direction="rtl" unicode-bidi="bidi-override" text-anchor="end" stroke="green" fill="green">
        Force RTL
    </text>
</svg>

在Chrome（v 27.0.1453.93 m）和I.E.（v 9.0.8112.16421）中，文本按照我的预期显示，字形从文本的结束点开始并向左前进。通过上面的示例，它显示在浏览器的左上角。

在Firefox（v 20.0.1）中，使用text-anchor =“end”的字形描边从文本的起点开始，显示不在页面上。如果我删除了text-anchor属性，则Firefox会显示为Chrome和I.E.使用。

我的问题是

有谁知道这里发生了什么？或者这是一个FF错误？

如果没有解决办法，我如何在SVG中的用户代理之间切换，这样对于Firefox，我可以避免使用文本锚？

非常感谢

Answer 1

这是Firefox中的一个错误。幸运的是，由于我们正在修改/重写SVG中的文本支持，它将很快被合理地修复（不确定何时）。如果要查看它是否正常工作，请在URL栏中下载Firefox nightly类型about：config并将svg.text.css-frames.enabled设置为true。因此，请注意用户代理测试，因为这将在不久之前得到修复。

使用bidi-override和text-anchor =“end”显示SVG RTL文本的浏览器差异

1 个答案: