Тонкость с масштабированием текста в SVG

Jan 08, 2013 17:43


Некоторое время сражался с масштабированием текста внутри SVG при построении диаграммы. Ну, скажем, диаграмму я могу рассчитать и вписать в область фиксированного размера, потом добавляю к ней подписи - и оп-ля! картинка приобретает заранее точно непредсказуемый размер, превосходящий выделенный контейнер. Приходится её перемасштабировать после отрисовки. Вот я это и делал, только получал неожиданный результат именно с подписями.

Беру, скажем, текст, с BoundingClientRect’ом 49×9, применяю к нему transform="scale(10)" и получаю надпись размером, внезапно, не 490×90, а 473×81.

Потом обнаружил, что, оказывается, есть «волшебное слово»: атрибут text-rendering="geometricPrecision". Он, типа, заставляет текст отрисовываться не приблизительно, а точно.

P. S. Кстати, вряд ли кому-то ещё пригодится, но: во времена Firefox 3.6 у дополнения Firebug был баг, заставляющий элементы object обращаться за одной и той же SVG-шкой на сервер по отдельности, столько раз, сколько их там всего. Сие приводило к тягостному эффекту на страницах, где было много одинаковых оформительских SVG-картинок.

firebug, firefox, Web-разработка, svg

Previous post Next post
Up