Этот вопрос немного конкретен, и я надеюсь, что кто-то здесь сможет пролить свет на потенциальное решение для меня.
Все следующие пункты важны:
Я пишу некоторые HTML-страницы, которые будут читаться на стороннем портативном устройстве.
Чтобы соответствовать требованиям этого устройства, каждое слово должно быть в отдельном интервале, это для будущей функции устройства, в которую мне не разрешено входить, но оно должно быть отформатировано следующим образом. .
Этот HTML-код конвертируется из SVG, SVG создан из документов Adobe Illustrator.
Единственное место, где я могу контролировать создание HTML, - это преобразование из SVG в HTML.
Моя проблема в том, что в SVG текст разбивается на «текстовые» узлы и узлы tspan. Посмотрите на этот простой SVG, обратите внимание, как я меняю координату Y в первом tspan.
<text><tspan y="50">Hello</tspan><tspan> World</tspan></text>
Когда это отображается в браузере, основанном на webkit, например safari, предложение «Hello World» отображается со словом «World» рядом со словом «Hello».
В моем преобразованном примере HTML:
<div><span style="position:absolute;top:50px;">Hello</span><span> World</span></div>
«Привет» отображается со смещением y на 50, однако «Мир» отображается в верхнем левом углу страницы.
Это расстраивает, так как у меня нет координат того, где должен быть размещен промежуток "Мир" в SVG (поскольку Illustrator не нужен этот координаты для правильной визуализации). Кроме того, в SVG может быть один или несколько tspans с измененными позициями, которые не позволят мне применить стиль к div.
Короче говоря, кто-нибудь знает, есть ли атрибут, который я могу установить для размещения второго диапазона сразу после первого?
Спасибо