Арабский и иврит текст в SVG

У меня есть что-то настроенное в сети, где пользователь может вводить текст в поле ввода, и этот текст затем отображается и сохраняется как файл SVG.

Он помещает текст в <text> а также <tspan> узел.

Текст должен быть определенным образом, поэтому я прилагаю text-anchor свойство установлено в узел tspan со значением "middle", и я установил x свойство узла tspan, равное половине ширины родительского элемента.

Это работает точно так же, как и ожидалось с латинскими символами, текст центрируется и выравнивается, как и должно быть, как в браузере, так и после загрузки SVG в Adobe Illustrator.

Проблема возникает с ивритом, арабским и азиатским текстом. Все они выровнены, как и следовало ожидать в Chrome, Safari и Firefox. Но в Internet Explorer и после загрузки файла в Adobe Illustrator текст кажется случайно выровненным по всему файлу. Шрифт отображается правильно, но расположение неверно. Игра с координатами и свойством text-anchor сместит текст, но я не могу получить последовательные правильные результаты.

Азиатский текст, кажется, только немного смещен вправо, иврит и арабский язык выровняются почти повсюду.

Что я упускаю / не понимаю?

Изменить: Вот некоторые окончательные результаты SVG

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

0 ответов

Другие вопросы по тегам