Я пишу программное обеспечение на стороне сервера, которое делает фильм путем генерации отдельных кадров в SVG и рендеринга в PNG с помощью rsvg-convert. Фильм требует, чтобы эффект применялся к тексту в SVG на индивидуальной основе. С текстовым элементом SVG я не могу применять отдельные стили к каждому символу, поэтому я должен визуализировать текст, используя отдельные текстовые элементы для каждого символа.
Мой вопрос: каков наилучший способ получения позиций оси X каждого символа, чтобы при рисовании текста символ за символом он выглядел идентично нарисованному тексту?
с одним текстовым элементом.
то есть ..
<text x="100" y="100">aic</text> идентично <text x="?" y="100">a</text>
<text x="?" y="100">i</text> <text x="?" y="100">c</text>
У меня есть одно решение: при подготовке анимации в браузере используйте метод getExtentOfChar () текстового элемента SVG и передайте эти метаданные на сервер. Мне это не нравится, потому что оно оставляет меня открытым для вариантов реализации браузера, установленных шрифтов, ошибок браузера и т. Д. Кроме того, это затрудняет тестирование и не позволяет автоматически генерировать эти фильмы из сценария.
Я подозреваю, что мне нужно будет работать напрямую с библиотекой freetype2 или Pango, но я надеюсь, что кто-то уже решил эту проблему.