Библиотека Raphael
Язык разметки SVG (в связке с SMIL) не является чем-то сложным. Однако, так как это язык разметки, а не язык программирования, он не умеет считать числа и перехватывать события. Чтобы рассчитать сложные траектории полета отдельнх фигур или добавить интерактивности рисунку, приходится скрещивать JavaScript и SVG, из-за некоторых нюансов это не очень-то просто.
Библиотека Raphael, написанная Дмитрием Барановским, превращает процесс создания динамических векторных рисунков на веб-странице в сказку. Но простота - не главное достоинство библиотеки. Гораздо важнее то, что Raphael представляет из себя общий программный интерфейс сразу для двух технологий с разным синтаксисом - SVG и VML. К сожалению, самый популярный на сегодня браузер Internet Explorer не поддерживает SVG (до 9 версии), работает только с альтернативной технологией - VML. Таким образом, Raphael позволяет разработчикам с минимальными трудозатратами "на лету" создать картинку для браузеров Firefox 3.0+, Safari 3.0+, Opera 9.5+ и Internet Explorer 6.0+.
Онлайн редактор Графинга использует именно эту библиотеку.
Разобраться с библиотекой совсем несложно, на сайте присутствует компактная и понятная англоязычная документация.
Вот лишь самый простой пример. Круг, нажатие на который вызывает непредсказуемые метаморфозы этого самого круга:
<html>
<head>
<title>Демонстрация работы Raphael</title>
<!-- Подключаем скачанную библиотеку -->
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript">
var c = false;
//Функция рисует картинку после загрузки страницы
//body onload="draw()"
function draw() {
//Холст - div "notepad"
var paper = Raphael(document.getElementById("notepad"), 350, 350);
//Создаем кружок
c = paper.circle(50, 50, 40);
//Присваиваем атрибуты (заливка цветом, рамка, прозрачность)
c.attr({fill: "#f00", stroke: "#000", opacity: 0.5});
//Вешаем событие - нажатие ЛКМ
c.click(function() {
cx = Math.random()*300;
cy = Math.random()*300;
cr = Math.random()*80;
//По клику будет происходить анимация
c.animate({'cx': cx, 'cy': cy, 'r': cr}, 1000);
});
}
</script>
</head>
<body onload="draw()">
<!-- Создаем холст -->
<div id="notepad" style="width: 350px; height: 350px;">
</div>
</body>
</html>
3.html
Вот так это выглядит внутри страницы (кликните по кругу). И никакого флеша!
Источник: http://graphing.ru
