SVG - Animaţii prin JavaScript

Principii

SVG, ca limbaj de marcare, împreună cu un limbaj bazat pe evenimente (JavaScript) şi un limbaj de definire a prezentării (CSS) poate fi folosit într-o manieră asemănatoare tehnologiei DHTML, sau mai noului AJAX.

Proprietăţile şi tehnologiile ce stau la baza posibilităţii de modificare a imaginilor SVG ca urmare a acţiunilor utilizatorului sunt:

  • XML
  • JavaScript, ECMAScript
  • DOM Core
  • DOM SVG
  • DOM Events
  • CSS + DOM CSS
  • XMLHTTPRequest

Modificări neanimate

Schimbarea proprietăţilor la evenimente:

Drag and Drop:

Modificări prin animaţie

Exemplu de Drag and Drop animat:

Exerciţii

  • Simulaţi în SVG unul dintre screensaver-ele clasice: Beziers, Mystify, Starfield.