Arabic and Hebrew text in SVG

问题

I have something set up online where a user can input text into an input field, and that text is then displayed and saved as an SVG file.

It puts the text inside a <text> and <tspan> node.

The text needs to be certain way, so I attach the text-anchor property set to the tspan node with the value of "middle" and I set the x property of the tspan node to exactly half the width of the parent.

This works exactly as expected with latin characters, the text is centered and aligned as it should be, both in browser and once the SVG is loaded in Adobe Illustrator.

The issue arises with Hebrew, Arabic and Asian text. They all align as I would expect in Chrome, Safari & Firefox. But in Internet Explorer, and once the the file is loaded into Adobe Illustrator the text seems to be randomly aligned around the file. The font displays correctly, but the positioning is wrong. Playing around with the coordinates and the text-anchor property will shift the text but I cannot get consistent correct results.

The Asian text seems to only shift to the right slightly, the Hebrew and Arabic will align pretty much all over the place.

What am I missing / not understanding?

Edit: Here is some final SVG output

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="&#x645;&#x631;&#x62D;&#x628;&#x627;" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="50px" height="32px" enable-background="new 0 0 50 32" xml:space="preserve">
    <path d="M49.327,24.938c0,6.396-6.604,6.397-6.604,6.397L6.859,31.344c0,0-6.859-0.281-6.859-6.594c0-5.796,0-13.918,0-18.062&#10;&#9;C0-0.187,6.89,0,6.89,0h35.789c0,0,6.648,0.062,6.648,6.562S49.327,18.542,49.327,24.938z"/>
    <path d="M47.171,23.826&#10;&#9;c0,6.259-6.027,5.513-6.027,5.513L8.418,29.346c0,0-6.259,0.904-6.259-5.682c0-4.994,0-11.994,0-15.565&#10;&#9;c0-6.724,6.288-5.763,6.288-5.763h32.659c0,0,6.328-0.522,6.064,5.655C46.933,13.587,47.169,18.315,47.171,23.826z" fill="none" stroke="#000" stoke-width="0.25" stroke-linejoin="round" stroke-linecap="round"/>
    <text>
        <tspan x="25" y="14" fill="#fff" stroke="#fff" stroke-width="0.14" stroke-miterlimit="10" font-family="Arial" font-size="8px" text-anchor="middle" letter-spacing="0.035em">&#x645;&#x631;&#x62D;&#x628;&#x627;</tspan>
        <tspan x="25" y="23" fill="#fff" stroke="#fff" stroke-width="0.14" stroke-miterlimit="10" font-family="Arial" font-size="8px" text-anchor="middle" letter-spacing="0.035em">&#x642;&#x637;</tspan>
    </text>
</svg>

来源：https://stackoverflow.com/questions/22822930/arabic-and-hebrew-text-in-svg