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

Question

关于这个issue讨论的问题我想咨询更多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/ 中注意到这种奇怪的效果特别是在“市区”和“码头”标签上

• Screenshot 1在 Windows 7 + Chrome 32 上

• Screenshot 2在 Windows 7 + Chrome 32 上

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

Answer 1

在某种程度上你依赖于浏览器，但你可以使用 text-rendering 给浏览器建议属性(property)。

来自规范:

11.7.4 The ‘text-rendering’ property

The creator of SVG content might want to provide a hint to the implementation about what tradeoffs to make as it renders text. The ‘text-rendering’ property provides these hints.

auto
Indicates that the user agent shall make appropriate tradeoffs to balance speed, legibility and geometric precision, but with legibility given more importance than speed and geometric precision.

optimizeSpeed
Indicates that the user agent shall emphasize rendering speed over legibility and geometric precision. This option will sometimes cause the user agent to turn off text anti-aliasing.

optimizeLegibility
Indicates that the user agent shall emphasize legibility over rendering speed and geometric precision. The user agent will often choose whether to apply anti-aliasing techniques, built-in font hinting or both to produce the most legible text.

geometricPrecision
Indicates that the user agent shall emphasize geometric precision over legibility and rendering speed. This option will usually cause the user agent to suspend the use of hinting so that glyph outlines are drawn with comparable geometric precision to the rendering of path data.

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