11.7.4'text-rendering'属性

Question

我想更多地询问有关此问题的讨论问题SVG Font Rendering Problems while rendering Text on a Path in Chrome and Safari

上显示的示例

<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

Screenshot 1

Screenshot 2

Screenshot 2

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

Answer 1

在某种程度上，您依赖于浏览器，但您可以使用text-rendering属性提供浏览器建议。

来自规格：

11.7.4'text-rendering'属性

SVG内容的创建者可能希望提供有关在呈现文本时要做出哪些权衡的实现的提示。 'text-rendering'属性提供了这些提示。

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

<强> optimizeSpeed
  表示用户代理应强调渲染速度超过易读性和几何精度。此选项有时会导致用户代理关闭文本消除锯齿。

<强> optimizeLegibility
  表示用户代理应强调对渲染速度和几何精度的可读性。用户代理通常会选择是否应用抗锯齿技术，内置字体提示或两者来生成最清晰的文本。

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

对于弯曲或转换的文本，我认为geometricPrecision会产生最佳结果。请参阅live example。

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

1 个答案:

11.7.4'text-rendering'属性