Главная » XSLT » Преобразование XML в SVG – Введение

0

Scalable Vector Graphics (SVG) – это формат векторной графики, записывае­мый в синтаксисе XML. У него есть все возможности революционно изменить способ доставки графического контента через Интернет. Одна из самых убеди­тельных причин кодировать графику в виде XML заключается в том, что ренде­ринг данных оказывается частным случаем преобразования. Поэтому язык XSLT, в который не включены никакие графические возможности, способен генериро­вать сложные образы, так как большая часть работы делегируется интерпретато­ру SVG, работающему внутри браузера.

Хотя в этой главе предполагается, что читатель знаком с SVG, мы все же крат­ко опишем некоторые простые факты, которыми будем пользоваться.

Первое, что нужно знать, приступая к работе с графической системой, – как в ней устроена система координат. Потратив годы на изучение алгебры, тригоно­метрии и математического анализа, многие технически подкованные читатели склонны считать наиболее естественной декартову систему координат. В ней ко­ордината x (абсцисса) увеличивается слева направо, а координата y (ордината) – снизу вверх. Увы, в SVG применяется не декартова система. Направление оси у изменено на противоположное, то есть точка (0,0) находится в левом верхнем углу, а ордината увеличивается сверху вниз. Для многих приложений неважно, как организована система координат. Но для отображения графических данных де­картова система удобнее, поскольку ориентация осей на дисплее соответствует ин­туитивным ожиданиям пользователя. В SVG есть мощный механизм, позволяющий трансформировать систему координат в соответствии с потребностями приложе­ния. Для этого к отдельным линиям или формам, а также группам графических эле­ментов применяются геометрические преобразования: параллельный перенос, по­ворот и гомотетия (масштабирование). В частности, указать, что вы собираетесь работать в декартовой системе, можно, задав следующее преобразование:

<svg:g transform="translate(0,{$height}) scale(1,-1)">

<!– Все содержимое представлено в декартовых координатах –>

</svg:g>

Здесь $height – высота всего SVG-изображения или наибольшая ордината по всем входящим в него графическим объектам.

При вычерчивании графика можно перенести начало координат и масштаби­ровать изображение в соответствии с данными:

<svg:g transform="scale(1,{$height div $max})">

<!– Все содержимое представлено в декартовых координатах –>

</svg:g>

В этом примере координата y масштабируется с учетом высоты SVG-изображе- ния $height и максимального представимого на графике значения $max.

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

<svg:text x="{$someXPos}" y="{$someYPos}"

transform="translate({$someXPos},{$someYPos}) scale(1,{-$max div $height}) translate({-$someXPos},{-$someYPos})">

Текст

</svg:text>

От таких преобразований у меня голова идет кругом, но иногда это лучший способ добиться нужного результата.

Мангано Сэл  XSLT. Сборник рецептов. – М.: ДМК Пресс, СПБ.: БХВ-Петербург, 2008. – 864 с.: ил.

По теме:

  • Комментарии