TP 7

XML — Licence Pro BDISE — 13 janvier 2017

Xlink: xmlns:xlink="http://www.w3.org/1999/xlink" (à mettre en attribut de la racine).

Construction de SVG

Le but de cet exercice est de construire à partir d'un document XML une page HTML contenant du SVG animé.

Construction d'un chemin SVG

  1. Définir une image SVG de 800px par 200px.
  2. Construire le code svg d'un chemin à l'apparence d'une cloche (on le tracera pour bien le voir):
    Une cloche sinusoïdale
    Il suffit pour cela d'une Bézier quadratique dont le point de contrôle est sur la médiatrice des points de départ et d'arrivée.
  3. Modifier cette courbe pour qu'elle continue jusqu'à atteindre les bords de l'image: Une cloche sinusoïdale
  4. Séparer cette définition entre le chemin lui même dans un def et son utilisation pour le tracer.

Animation du chemin

  1. Pour animer le chemin, on modifira simplement l'amplitude de la courbe jusqu'à ce qu'elle s'inverse.
  2. Placer du texte (par exemple la phrase "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis metus quam.") le long de ce chemin animé.
  3. Décorer ce texte à l'aide d'un dégradé aux couleurs reptiliennes (lime, green...). En créer un second, plus "méchant", dans la foulée (ne pas oublier de le nommer).
  4. Animer ce texte sur ce chemin de façon à ce qu'il "défile". On pourra modifier l'attribut startOffset.

Utilisation dans du XSLT

On va mettre en forme la liste des serpents contenue dans Snakes.xml (la DTD est fournie) avec des titres rampants (animés) en SVG, comme définis auparavant:
Capture d'écran

  1. Pour commencer, on va s'occuper de défnir tout ce dont on a besoin dès le début du document. Le HTML produit devra donc commencer par une "image" svg de dimension vide qui contient toutes les définitions.
  2. On s'occupe alors des templates pour mettre en forme chaque serpent: dans un h2 sera le titre "rampant" (on s'en occupera par la suite), en dessous seront les informations contenues dans le XML, par exemple sous la forme: The Worm Snake is the common name of Typhlops vermicularis. It can be found in south-eastern Europe, Cyprus, across to Afghanistan.
  3. On s'occupe maintenant du titre du serpent, qui est le texte rampant. On utilisera le dégradé "méchant" pour les serpents veneneux et le dégradé reptilien normal pour les autres.