Text 曲线文本路径存在SVG文本对齐问题

我想进一步询问关于这个问题所讨论的问题

下面是上所示的示例

新闻资讯按音乐

在Firefox26（OSX）上，文本看起来没有对齐，如果应用了缩放，情况会更糟。这个问题在Windows7上的Chrome32上更为严重

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

作为D3.js开发人员，这会影响使用此技术的某些可视化的外观。例如，你可以在“闹市区”和“码头”标签上特别注意到这种奇怪的效果

• 在Windows7+Chrome32上

• 在Windows7+Chrome32上

---

我只是想问一下，是否有人知道解决方法，或者我们只是任由每个浏览器如何尽力沿路径呈现文本而定？

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

根据规范：

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

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

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

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

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

---

对于弯曲或变换的文本，我认为

几何精度

的结果最好。请参阅。

我想让它始终如一工作的唯一方法是将生成的可视化效果渲染成PNG并提供服务。当然，你会失去任何互动性。我遇到过同样的问题。不幸的是，我只能报告更令人困惑的事实：我的作品中的Chrome+Windows7生成了不错的文本，而我家中的Chrome+Windows7看起来很糟糕。而且，是的，我检查了Windows和Chrome的版本，它们在两个地方都是一样的！对于Chrome，你可以跟踪bug的进展。不幸的是，即使这样，在不同浏览器中也不能保持一致。是的。“最好”并不总是意味着“好”！甚至规格也明确表示，这只是对浏览器的一个“建议”。除此之外，我的建议是在不同字体的系统上进行大量测试。是的，即使使用值geometricPrecision，跨浏览器也会导致相同的问题

<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>