Манипулирование / перевод <text>в SVG (добавление ограничительной рамки) - PullRequest
Новая
       1

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

6 голосов
/ 10 февраля 2012

Проблема : Нам нужно скопировать текст SVG, созданный в RaphaelJS, с переменным шрифтом-шрифтом, размером шрифта, положением, масштабом, поворотом в SVG.

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

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

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

enter image description here

РЕДАКТИРОВАТЬ : Проблема была решена с помощью команды matrix () и прямой трансляции преобразований, в отличие от применения позиционирования, затем масштабирования, затем вращения.

1 Ответ

1 голос
/ 10 февраля 2012

Если вы хотите манипулировать позициями символов в словах: предложениях и SVG, которые вы генерируете на сервере, вы сможете использовать SVG TSPAN и ориентировать положение символов.Если вы можете изменить буквы на путь, то я думаю, что алгоритм будет возможен.Ничто не помешает вам создать массив относительных позиций для ваших буквенно-цифровых шрифтов.Я надеюсь, что некоторые из вышеперечисленных полезны ...

...