Как получить отдельные позиции символов текста SVG на сервере

Question

Я пишу программное обеспечение на стороне сервера, которое делает фильм путем генерации отдельных кадров в 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, но я надеюсь, что кто-то уже решил эту проблему.

Answer 1

Если вы поместите символы в tspans, вы сможете их стилизовать: http://jsfiddle.net/longsonr/qxe4S/ не намного ли проще?