Я новичок в этом...
У меня есть много ресурсов, которые экспортируются в формате jpeg, когда я их перевариваю. Но нам часто приходится переводить эти ассеты, и в итоге я, разработчик, компоную ассет в коде с растровыми изображениями (обычно это фоны с текстом поверх). Затем в коде применяем перевод.
То, что я хотел бы разработать, — это способ проектирования ресурсов в иллюстраторе и экспорта их в виде файлов SVG для использования в приложении. Затем в коде я могу настроить таргетинг на этот ресурс SVG и изменить текст на переведенную версию перед его визуализацией.
Кто-нибудь знает какие-либо подводные камни с этим подходом?
Кто-нибудь знает, как сделать текстовый элемент доступным для ссылки в SVG и легко изменяемым?
У меня есть этот код:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 657.06">
<title>TestSVG</title>
<image width="400" height="600" xlink:href="iu.png"/>
<text transform="translate(7.38 639.06)" font-size="72" font-family="MyriadPro-Regular, Myriad Pro"><tspan letter-spacing="-0.07em">T</tspan><tspan x="30.67" y="0">est</tspan><tspan x="119.09" y="0" letter-spacing="-0.04em"> </tspan><tspan x="131.4" y="0" letter-spacing="-0.07em">T</tspan><tspan x="162.07" y="0" letter-spacing="0em">e</tspan><tspan x="197.93" y="0" letter-spacing="0.01em">x</tspan><tspan x="232.2" y="0">t</tspan></text>
Обратите внимание, что текст построен с помощью Tspan и т. д. Требуется ли это в файлах SVG, созданных иллюстратором? или я могу просто сказать иллюстратору упростить это с помощью какого-то text="Test Text"
и FontSize=72
?
Редактировать: потому что проще изменить Text="Test"
, чем найти способ генерировать Tspan
материал.
Конечно, вы можете это сделать, но тогда вы не сможете использовать ни одну из функций текстового движка Adobe. Это означает:
Это, по сути, одна из основных причин, по которой средний дизайнер использует программное обеспечение Adobe.
Это сработает.
Дайте каждому текстовому слою имя, соответствующее соглашениям об именах XML. Таким образом вы получите то же самое id
для экспортированного элемента SVG.
Можно просто удалить <tspan>
элементы, если только ваш дизайнер не заботится о межсимвольном интервале и других свойствах текста, заданных в Illustrator. Если ваш дизайнер согласен с этим, вы можете просто сделать эквивалент getElementById("myTextElement").innerHTML = "Bonjour monde!"
для перевода текста.