SVG Font Rendering Problems while rendering Text on a Path in Chrome and Safari

问题

I try to render some text along a bezier curve path in SVG:

        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <path id='menu_path' d="M 80,40 Q 200,85 245,205" stroke="none" fill="none"/>
            <text fill="white">
                <textPath xlink:href="#menu_path">News Info Presse Musik</textPath>
            </text>             
        </svg>  

In Firefox this works fine, but in Chrome and Safari, the text looks ugly (look at "Musik"). Even when I use monospace fonts and set the text to uppercase it does not change.

Here the Screenshots:

• http://imageshack.us/a/img18/3195/svgrendering.png
• http://imageshack.us/a/img705/7334/svgrenderingwithpath.png

Does somebody have an idea on how to avoid this?

I created a jsfiddle which shows the problem:

http://jsfiddle.net/v6esx/

Thank you!

来源：https://stackoverflow.com/questions/13850849/svg-font-rendering-problems-while-rendering-text-on-a-path-in-chrome-and-safari