Категория: Статьи о графике -> Векторная графика (SVG)
Чтобы оценить всю мощь технологии SVG и получше познакомиться с синтаксисом этого языка, можно изучить графические и программные примеры, представленные списком на этой странице.
Для просмотра примеров вам понадобится браузер последней версии (Firefox, Opera, Chrome, Safari, IE9).
1. Овалы, созданные при помощи JavaScript и path.
2. Бабочка. Достаточно сложный для векторной графики рисунок.
4. Молекулярная схема, увеличенная в несколько раз. Демонстрируется одно из преимуществ SVG - масштабирование без потери качества.
5. Круги. Полупрозрачные, разноцветные, пересекающиеся.
6. Те же круги, но на фоне растрового рисунка.
7. Управляемый треугольник. Демонстрация того, что каждый элемент SVG - это элемент DOM (такой же элемент страницы, как, например, <div>). Управление элементами DOM с легкостью берет на себя JavaScript.
8. Управляемый треугольник с расширенными возможностями.
9. Простые эллипсы.
10. Круги, реагирующие на клик мышкой. Демонстрация связи SVG и JavaScript onclick.
11. Круг, который можно перемещать мышкой. Демонстрация связи SVG и JavaScript.
12. Градиент, созданный с помощью SVG.
13. Еще один градиент.
14. Просто линии разной формы.
15. Тигренок. Еще один достаточно сложный для векторной графики рисунок.
16. Прозрачные звездочки. Демонстрация параметра opacity и взаимодействия SVG и JavaScript.
16. Прозрачные звездочки 2. Демонстрация CSS прозрачности.
17. Демонстрация Paths.
18. Демонстрация Paths 2.
19. Демонстрация Paths 3 . Диаграммы.
21. Демонстрация Polygons 2. CSS свойство :hover позволяет присваивать стиль элементу при наведении мышкой.
22. Демонстрация Polygons 3. attribute-selectors, CSS :hover
23. Взрослый тигр.
24. Пара игрушек, написанных на SVG и JavaScript: тетрис и платформа.
25. Многоугольники.
26. Многоугольники 2. Демонстрация смеси SVG и CSS (:hover).
27. Примеры SMIL анимации.
28. Демонстрация работы JS библиотеки Raphael тут.
Просмотр исходного кода - в опциях правой кнопки мышки или в меню браузера после перехода по ссылке на пример.
Спасибо http://croczilla.com/bits_and_pieces/svg/samples/
Дата: 2010.07.04 в 13:47:36
Все комментарии (2):
Отсутствует пример:
11. Круг, который можно перемещать мышкой
Пример использования SVG для отображения мнемосхем http://svgmnemo.ru
Ваш комментарий