Манипулирование/перевод <текста> в SVG (добавление ограничивающей рамки)

Problem: Нужно воспроизвести SVG-текст, созданный в RaphaelJS с переменными font-face, font-size, position, scale, rotation в SVG.

НО... Raphael использует ограничивающую рамку для текста, высота которой не зависит от фактической высоты строки. Высота ограничивающей рамки основывается на размере шрифта и font-family, но не зависит от фактической высоты строки. Поэтому строки "Y" и "," (с одинаковым шрифтом и размером шрифта) имеют одинаковую высоту.

Когда мы воссоздаем текст в SVG (генерируя его в PHP), мы можем получить правильный размер шрифта и правильный font-family. Однако высота SVG НЕ зависит от фактической строки. Поэтому символ "," будет иметь гораздо меньшую высоту, чем символ "Y". Эта разница в высоте нарушает вращение и позиционирование.

ВОПРОС: Как создать svg с "ограничивающей рамкой", которая повторяет getBBox RaphaelJS (который по сути просто создает рамку, в которую поместится любой символ), чтобы мы могли имитировать вращение и позиционирование из RaphaelJS? ПРИМЕЧАНИЕ: Мы можем преобразовать текст->путь для SVG, если это поможет. У нас также есть доступ к файлам шрифтов.

enter image description here

EDIT: Проблема была решена с помощью команды matrix() и прямого перевода преобразований, в отличие от применения позиционирования, затем масштабирования, затем вращения.

6
задан Walker 10 February 2012 в 22:38
поделиться