带有弯曲文本路径的 SVG 文本对齐问题

Question

想咨询更多关于本期讨论的问题SVG Font Rendering Problems while rendering Text on a Path in Chrome and Safari

按照http://jsfiddle.net/v6esx/4/上显示的示例

<path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="black"/>
    <text fill="white">
        <textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
    </text>  

在 Firefox 26 (OSX) 上，文本看起来没有对齐，如果应用缩放则更是如此。这个问题在 Windows 7 上的 Chrome 32 上更加严重。

您可以在以下位置看到原始问题的一些屏幕截图：

http://imageshack.us/a/img18/3195/svgrendering.png

enter link description here http://imageshack.us/a/img18/3195/svgrendering.png

http://imageshack.us/a/img705/7334/svgrenderingwithpath.png

enter link description here http://imageshack.us/a/img705/7334/svgrenderingwithpath.png

作为 D3.js 开发人员，这会影响使用该技术的一些可视化效果的外观。例如，您可以在 http://bost.ocks.org/mike/uberdata/ 中注意到这种奇怪的效果，特别是在“Downtown”和“Marina”标签上

• Screenshot 1 在 Windows 7 + chrome 32 上

• Screenshot 2 在 Windows 7 + chrome 32 上

我想问一下，有没有人知道解决方法，还是我们只是受制于每个浏览器如何尽力沿路径呈现文本？

Answer 1

在一定程度上你依赖于浏览器，但你可以使用text-rendering属性给浏览器建议。

根据规格：

11.7.4 “文本渲染”属性

SVG 内容的创建者可能希望为实现提供一个提示，说明在呈现文本时需要做出哪些权衡。 “text-rendering”属性提供了这些提示。

自动
表示用户代理应做出适当的权衡以平衡速度、易读性和几何精度，但易读性比速度和几何精度更重要。

优化速度
表示用户代理应该强调渲染速度而不是易读性和几何精度。此选项有时会导致用户代理关闭文本抗锯齿。

优化易读性
表示用户代理应该强调易读性而不是渲染速度和几何精度。用户代理通常会选择是否应用抗锯齿技术、内置字体提示或两者兼而有之，以生成最清晰的文本。

几何精度
表示用户代理应强调几何精度而不是易读性和渲染速度。此选项通常会导致用户代理暂停使用提示，以便以与渲染路径数据相当的几何精度绘制字形轮廓。

对于弯曲或变形的文本，我认为geometricPrecision 会产生最佳结果。见live example。