« Tutoriel XSLT pour générer du SVG » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
m (Remplacement de texte — « <pageby nominor="false" comments="false"/> » par « <!-- <pageby nominor="false" comments="false"/> --> »)
(Contenu remplacé par « #REDIRECTIONTutoriel pour générer du SVG avec du XSLT Doublon de la page de redirection. Le contenu de ces deux pages a été fusionné ~~~~ (toujours accessibl... »)
Balise : Contenu remplacé
 
(2 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
<!-- <pageby nominor="false" comments="false"/> -->
#REDIRECTION[[Tutoriel pour générer du SVG avec du XSLT]]


{{incomplet}}
Doublon de la page de redirection. Le contenu de ces deux pages a été fusionné [[Utilisateur:Lydie BOUFFLERS|Lydie BOUFFLERS ]] ([[Discussion utilisateur:Lydie BOUFFLERS|discussion]]) 21 avril 2020 à 10:55 (CEST) (toujours accessible via l'historique)
 
== Introduction ==
 
Ce tutoriel va vous apprendre comment générer des graphiques SVG à partir de données XML.
 
<div class="tut_goals">
 
'''Objectifs d'apprentissage'''
 
*Comprendre le but de XSLT, c'est-à-dire être capable de penser le XSLT comme une langue de traduction.
*Faire de transformations simples de XML en HTML.
*Etre capable d'utiliser des expressions XPath (noms de balises et attributs) dans les sélecteurs d'éléments et pour l'extraction d'éléments et d'attributs.
 
; Pré-requis
 
* Editer du [[XML]] (être capable d'utiliser une simple DTD). Etre allé voir le [[Editing XML tutorial]]
* Espaces de noms XML (jeter un oeil à l'article [[XML namespace]] )
* HTML and CSS (certains)
* [[Tutoriel XSLT débutant]]
* [[Tutoriel XPath]]
* [[Tutoriel SVG statique]] ('''important''')
* [[Tutoriel SVG avec HTML5]]
* [[SVG/SMIL animation tutorial]] (''optionnel'')
 
; Prochaines étapes
 
* [[XPath tutorial - basics]]
* [[XQuery tutorial - basics]] (if you have interest in XML databases)
* [[PHP - MySQL - XML tutorial - basics]] (shows how to display an XML result-set retrieved form MySQL with XSLT)
 
</div>
 
== Mon premier SVG à partir d'XML ==
Générer du SVG avec XSLT est très facile si vous maîtrisez les basiques de la programmation XSLT, comme expliqué dans [[Tutoriel XSLT débutant]]. Bien-sûr, vous avez aussi besoin de quelques bases en SVG.
 
Pour le moment, vous pouvez utiliser du SVG de trois manières différentes sur le web:
 
# Intégrer du SVG dans XHTML 1. Cela exige que vous vous serviez d'XHTML en tant qu'XML. Si vous ne comprenez pas ce que cela signifie, passez cette option.
# Générer un pur fichier SVG. Tous les navigateurs modernes peuvent l'afficher.
# Générer un fichier HTML5 avec du SVG inline. Generate an HTML5 file with inline SVG. Tous les navigateurs modernes peuvent l'afficher.
 
=== Exemple SVG niveau 0 ===
 
Nous allons d'abord montrer comment produire du SVG graphique à partir du contenu d'un document XML simple. Ensuite, nous allons montrer comment faire ceci pour HTML5.
 
Prenez le fichier XML suivant:
<source lang="XML">
<?xml version="1.0" ?>
<?xml-stylesheet href="zero.xsl" type="text/xsl" ?>
<thing>
  <height>50</height>
  <width>100</width>
</thing>
</source>
 
Nous pouvons imaginer que cela va donner un beau rectangle rouge. Nous devons écrire un modèle qui va extraire le contenu de la hauteur (height et de la largeur (width), puis l'utiliser pour définir les dimensions du rectangle SVG. Les débutants devraient remarquer que les noms de ces balises XML n'ont pas d'importance, nous aurions également pu appeler ces éléments a et b ...
 
Voici le code XSLT. Comme vous pouvez le voir, il est assez simple. En ce qui concerne les transformations XSLT à HTML, il ya  deux différences:
*Nous devons déclarer l'espace de SVG dans l'élément xsl: racine stylesheet en haut
*Nous devons configurer la sortie produite, le reste de votre navigateur peut ne pas vouloir afficher le code SVG.
<source lang="XML">
<?xml version="1.0"?>
 
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg"
>
  <xsl:output
      method="xml"
      indent="yes"
      standalone="no"
      doctype-public="-//W3C//DTD SVG 1.1//EN"
      doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
      media-type="image/svg" />
 
  <xsl:template match="thing">
    <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
      <rect x="10" y="10" width="{width}"
    height="{height}" fill="red" stroke="black"/> 
    </svg>
  </xsl:template>
</xsl:stylesheet>
</source>
 
Maintenant examinons le modèle qui traite de ''thing''. Nous n'avons pas besoin d'un modèle pour l'élément racine(''/''). Dans le code ci-dessus, le modèle de XSL pour générer ''thing'' sera la balise SVG du plus haut niveau.
<source lang="XML">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
  .....
</svg>
</source>
 
Ensuite, il suffit de définir un rectangle SVG et définir les valeurs des attributs SVG pour la largeur et la hauteur avec les valeurs que nous avons extraites du XML. En d'autres termes, ''{width}'' and ''{height}'' vont être remplacés par le texte trouvés dans les balises <width> et <height> du document XML.
 
<source lang="XML">
<rect x="10" y="10" width="{width}" height="{height}" fill="red" stroke="black"/> 
</source>
Testez le code (peut inclure de légères variations):
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero.xml zero.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero.xsl zero.xsl]
 
=== Exemple HTML5 niveau 0 ===
 
Maintenant nous allons produire du HTML5. Le principe est exactement le même, mais la déclaration de sortie est un peu différente et le modèle est plus long, puisque nous produisons plus de code.
 
<source lang="XML">
<?xml version="1.0"?>
 
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns="http://www.w3.org/2000/svg"
>
<xsl:output
    method="xml"
    doctype-system="about:legacy-compat"
    omit-xml-declaration = "yes"
    encoding="UTF-8"
    indent="yes" />
 
  <xsl:template match="thing">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8"></meta>
      <title>XHTML5 + SVG example</title>
    </head>
    <body>
      <p>This line is HTML, embedded SVG is below. Read the <a
      href="http://edutechwiki.unige.ch/en/XSLT_to_generate_SVG_tutorial">
      XSLT to generate SVG tutorial</a></p>
 
      <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" >
<rect x="10" y="10" width="{width}"
      height="{height}" fill="red" stroke="black"/> 
      </svg>
    </body>
  </html>
  </xsl:template>
 
</xsl:stylesheet>
</source>
 
Live Code (peut inclure de légères variations):
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero-html5.xml zero-html5.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/zero-html5.xsl zero-html5.xsl]
 
=== Visualiser quelques chiffres ===
 
L'exemple suivant ([http://tecfa.unige.ch/guides/svg/ex/html5-xslt/one-html5.xml look at it]) vous montre comment substituer un nombre par une barre qui apparaît dans les éléments de la liste.
 
Dans le XML ci-dessous, nous voulons traiter le contenu de l'élément ''age'' d'une manière plus intéressante :
<source lang="XML">
<?xml version="1.0"?>
<?xml-stylesheet href="one-html5.xsl" type="text/xsl"?>
<project>
<title>Simple XML to SVG demo</title>
<people>
  <person>
    <FirstName>Kaspar</FirstName>
    <age>50</age>
    <description>A small man with a green tie</description>
  </person>
  <person>
    <FirstName>Jonathan</FirstName>
    <age>9</age>
    <description>A young person</description>
  </person>
  <person>
  <FirstName>Julie</FirstName>
  <age>30</age>
  <description>A young woman</description>
  </person>
</people>
</project>
 
</source>
 
Le XSLT utilise une programmation XSLT assez simple, "fondée sur des règles". Le seul modèle d'intérêt concerne l'élément de l'âge. De plus, nous ajoutons un peu plus de style CSS pour les éléments HTML, par exemple, des boîtes div avec des bordures et nous allons aussi laisser l'élément SVG tout en haut, flotter à droite.
 
Tout d'abord, nous stockons la valeur de l'élément en question (c'est-à-dire, les contenus) de l'âge dans une variable appelée ''years''. Ce n'est pas nécessaire ici, mais cela permet de simplifier les expressions XPath complexes. Notez qu'une variable est utilisée dans une expression XPath avec un signe $ devant, par exemple, $years.
 
<source lang="XML">
<xsl:variable name="years" select="."/>
</source>
La partie du SVG ressemble alors à ceci. Notez que la hauteur ''rect'' est calculée : age*1.2
<source lang="XML">
  <svg style="background-color:yellow;float:right" width="20" height="100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
    <rect x="5px" y="5px" height="{$years*1.2}" width="10px" fill="green" />
  </svg>
</source>
 
Voici le code XSLT complet :
<source lang="XML">
<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/1999/xhtml"
  >
 
<xsl:output
    method="xml"
    doctype-system="about:legacy-compat"
    omit-xml-declaration = "yes"
    encoding="UTF-8"
    indent="yes" />
 
<xsl:strip-space elements="tasks participants"/>
 
<xsl:template match="/">
  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="utf-8"></meta>
      <title>XHTML5 + SVG example</title>
    </head>
    <body>
      <p>XHTML5 contents below are generated from XML with XSLT.
      Contents of and age elements are display in both text and with SVG as a green bar.
      Look at the source of this page for the XML and at the <a
      href="http://tecfa.unige.ch/guides/svg/ex/html5-xslt/one-html5.xsl">one-html5.xsl</a>
      file. Read the <a href="http://edutechwiki.unige.ch/en/XSLT_to_generate_SVG_tutorial">
      XSLT to generate SVG tutorial</a></p>
      <hr/>
      <xsl:apply-templates/>
    </body>
</html>
</xsl:template>
 
<xsl:template match="people">
  <h1>People</h1>
  <xsl:apply-templates/>
</xsl:template>
 
<xsl:template match="person">
  <div style="border-style:dotted;margin:10px;padding:5px;width:200px;height:100px;">
    <xsl:apply-templates/>
  </div>
</xsl:template>
 
<xsl:template match="FirstName">
  <xsl:apply-templates/>,
</xsl:template>
 
<xsl:template match="age">
  Age: <xsl:apply-templates/>
  <xsl:variable name="years" select="."/>
  <svg style="background-color:yellow;float:right" width="20" height="100"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
    <rect x="5px" y="5px" height="{$years*1.2}" width="10px" fill="green" />
  </svg>
</xsl:template>
 
<xsl:template match="description">
  <p><xsl:apply-templates/></p>
</xsl:template>
 
<xsl:template match="title">
  <h1><xsl:apply-templates/></h1>
</xsl:template>
 
</xsl:stylesheet>
 
</source>
 
Fichiers sources :
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/one-html5.xml one-html5.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/one-html5.xsl one-html5.xsl]
 
Vous trouverez un exemple plus complexe plus bas dans la section [[#Création_ de_simples _cartes_depuis_des_structures_d'information_tabulaire| Création de simples cartes depuis des structures d'information tabulaire]]
 
=== Création d'un graphique à barres simple ===
 
L'exemple nous avons présenté ci-dessus n'était pas vraiment intéressant. Dans les données XML, nous trouvons généralement plus que deux nombres. Voyons donc ce que nous pouvons faire avec une simple liste de chiffres:
 
Prenez le fichier XML suivant:
<source lang="xml">
<?xml version="1.0" ?>
<?xml-stylesheet href="intro.xsl" type="text/xsl" ?>
<list>
<item>10</item>
<item>15</item>
<item>12</item>
<item>20</item>
<item>5</item>
</list>
</source>
 
Cette liste permettrait la création d'un bon graphique à barres:
 
Le code suivant va le faire. Bien sûr, il reste simple. Par exemple, un bon code serait de calculer également des paramètres hauteur et largeur prenant en compte à la fois les données et l'espace de dessin que nous voulons utiliser.
 
La différence entre l'exemple "zéro" et celui-ci, c'est que nous faisons un peu de maths très simples et que nous utilisons des fonctions XSLT ''count()'' et ''position()''.
* La coordonnée y du rectangle est de 100 moins le nombre trouvé dans le fichier XML
<source lang="xml">
  y="{100- .}
</source>
* Nous utilisons la fonction count( pour déterminer le nombre d'éléments ''item'' que nous avons dans la liste. 
<source lang="xml">
    <rect x="10" y="105" width="{10 * count(item)}"
  height="5" fill="black" stroke="red"/>
</source>
* Notez également que les espaces vides entre les éléments comptent comme des nœuds selon la norme XML. Par conséquent, vous devez supprimer ces nœuds vides avec l'instruction suivante :
<source lang="xml">
  <xsl:strip-space elements="list"/>
</source>
* Chaque rectangle est positionné dans le SVG en fonction de sa position dans la liste XML:
<source lang="xml">
    <rect x="{10*position()}" y="{100- .}" width="10"
  height="{.}" fill="red" stroke="black"/> 
</source>
 
Le code source complet est ci-dessous. Nous ne discuterons pas la version HTML5 ici, mais vous trouverez ci-dessous est le lien qui vous fournira le code.
 
<source lang="xml">
<?xml version="1.0"?>
<!-- keep all three namespaces, xlink may not be needed, but the others are -->
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
 
  <!-- **** output/input configuration -->
 
  <xsl:output
      method="xml"
      indent="yes"
      standalone="no"
      doctype-public="-//W3C//DTD SVG 1.1//EN"
      doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
      media-type="image/svg" />
 
  <!-- must remove white spaces within the list element,
      otherwise count will not work -->
  <xsl:strip-space elements="list"/>
 
  <xsl:template match="/">
    <svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" >
      <!-- here we could draw a background rectangle -->
      <xsl:apply-templates/>
    </svg>
  </xsl:template>
 
  <xsl:template match="list">
    <rect x="10" y="105" width="{10 * count(item)}"
  height="5" fill="black" stroke="red"/>
    <xsl:apply-templates/>
  </xsl:template>
 
  <xsl:template match="item">
    <rect x="{10*position()}" y="{100- .}" width="10"
  height="{.}" fill="red" stroke="black"/> 
  </xsl:template>
 
</xsl:stylesheet>
</source>
 
Live example (comprenant un rectangle de fond)
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro.xml intro.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro.xsl intro.xsl]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-html5.xml intro-html5.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-html5.xsl intro-html5.xsl]
 
Nous avons également réalisé une version pour programmeur qui ont peur de la programmation à base de règles. Vous pouvez utiliser le code comme ceci:
 
<source lang="xml">
<xsl:template match="list">
<xsl:for-each select="item">
    <rect x="{10*position()}" y="{100- .}" width="10" height="{.}"
          fill="red" stroke="black"/>           
  </xsl:for-each>
  </xsl:template>
</source>
 
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-for.xml intro-for.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-for.xsl intro-for.xsl]
 
=== Création d'un simple graphique à barres flexible ===
 
[[Fichier : Xslt-svg-bar-chart2.png|200px|thumbnail|right|Screenshort d'un XML modifié en graphique à barres SVG]]
L'exemple précédent présente un défaut : la hauteur et la largeur des barres ne s'ajustent pas automatiquement :
* à la taille des canevas SVG
* au nombre d'items
* à la valeur maximale dans un item
 
Le résultat devrait ressembler à l'image de droite. Le diagramme doit remplir les canevas de dessin SVG fournis. Bien sûr, nous voulons aussi être en mesure de faire face à n'importe quel jeu ( raisonnable) de nombres positifs , c'est à dire le fichier XML peut comprendre plus ou moins d'éléments et aussi des valeurs différentes .
 
Cet exemple introduit des variables xslt et le traitement de la liste , vous pouvez sauter et y revenir plus tard ....
 
Tout d'abord , nous allons permettre aux utilisateurs de cette feuille de style de définir la taille des canevas avec des variables de style XSLT.
<source lang="XML">
  <!-- you could change these in any way you like -->
  <xsl:variable name="svg_width" select="400"/>
  <xsl:variable name="svg_height" select="300"/>
  <xsl:variable name="padding" select="5"/>
</source>
 
Note "à côté" :
Les variables XSLT ne sont pas vraiment variables, c'est que vous ne pouvez pas réaffecter une valeur dans le même contexte une fois qu'il est défini lors de l'exécution. Par exemple :
<xsl:variable name="qual" select="engagement"/>
liera le contenu de l'élément d'engagement dans une variable qui peut être rappelée en utilisant le signe $ , soit $qual dans notre cas. Chaque fois que le XSLT exécute un modèle, une nouvelle liaison $qual sera créée.
 
Retour à notre projet. Connaître la taille des canevas est l'une des informations dont nous avons besoin pour gérer la largeur , la hauteur et la position des barres. Nous devons ensuite déterminer combien d'items nous avons obtenu. L' expression suivante va calculer la largeur d'une barre à la largeur des canevas SVG, moins certains types de remplissage, divisé par le nombre d'items :
<source lang="XML">
  <!-- x-width with respect to N elements -->
  <xsl:variable name="x_width"
select="($svg_width - 2*$padding) div count(//list/item)"/>
</source>
Nous devons aussi besoin d'une sorte de "y-step" qui multiplié par le nombre définira la hauteur. Cela dépendra du plus grand nombre dans l'ensemble des items. L' expression suivante calcule la largeur de la barre :
<source lang="XML">
  <xsl:variable name ="y_steps">
    <xsl:for-each select="//list/item">
      <xsl:sort select="." data-type="number" order="descending"/>
      <xsl:if test="position() = 1">
<xsl:value-of select="($svg_height - 2*$padding) div ."/>
      </xsl:if>
    </xsl:for-each>
  </xsl:variable>
</source>
 
Le reste est simple. Nous avons juste montré le modèle pour ''item'':
<source lang="XML">
  <xsl:template match="item">
    <rect x="{$padding + $x_width * (position() - 1) }"
  y="{($svg_height - $padding) - $y_steps * .}"
  width="{$x_width}"
  height="{. * $y_steps}"
  fill="red" stroke="black"/> 
  </xsl:template>
</source>
Live example:
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-flexible.xml intro-flexible.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/intro-flexible.xsl intro-flexible.xsl]
 
=== Exemple W3C de la spécification XSLT ===
 
La spécification XSLT 1.0 comprend un exemple de graphique à barres que nous avons légèrement modifié et adapté à HTML5.
 
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/w3-xslt-svg-example.xml w3-xslt-svg-example.xml]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/w3-xslt-svg-example.xsl w3-xslt-svg-example.xsl]
 
== Création de simples cartes depuis des structures d'information tabulaire ==
 
Regardez d'abord le résultat:
* http://tecfa.unige.ch/guides/svg/ex/html5-xslt/xpath-jungle-links-1.xml
 
Ce fichier permet de visualiser une structure simple de l'information pour des projets. Le fichier XML comprend principalement deux listes :
* participants: Chaque participant a un prénom, un niveau d'engagement et une description
* tâches : Chaque tâche comprend un titre, une description, les membres qui renvoient aux participants, la difficulté et le niveau d'achèvement, une liste d'idées et une liste de résultats .
 
Extrait du fichier [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/xpath-jungle-links-1.xm XML]
<source lang="XML">
<?xml version="1.0"?>
<?xml-stylesheet href="xpath-jungle-links-1.xsl" type="text/xsl"?>
<project>
<title>The XSLT and SVG project</title>
<description>This project will explore some simple means to generate SVG from XSLT</description>
<participants>
  <participant id="p1">
    <FirstName>Daniel</FirstName>
    <engagement>4</engagement>
    <description>Daniel will be the project manager</description>
  </participant>
  ..........
</participants>
<tasks>
  <task id="t1">
    <title>Initial task</title>
    <description>Project preparation</description>
    <members><member idref="p1"/><member idref="p2"/></members>
    <difficulty level="3">This task should not be too hard</difficulty>
    <completion level="8">Fairly well understood so far</completion>
    <ideas>
      <item val="low">Buy a XSLT book</item>
      <item val="low">Buy an SVG book</item>
      <item val="high">Do some exploratory tiny examples</item>
    </ideas>
    <results>
      <result><a href="http://edutechwiki.unige.ch/en/XSLT_to_generate_SVG_tutorial">Wiki page</a> started</result>
      <result><a href="http://edutechwiki.unige.ch/en/XPath_tutorial_-_basics">XPath tutorial revised</a></result>
    </results>
  </task>
  .........
</tasks>
</project>
 
</source>
 
Voici les deux fragments XSLT plus importants , et qui mériteraient de plus amples explications :
 
<source lang="XML">
<xsl:template match="participant">
  <div style="float:left;border-style:dotted;margin:10px;padding:5px;width:200px;height:200px;">
    <xsl:apply-templates select="FirstName"/>
    <xsl:variable name="qual" select="engagement"/>
    <svg style="background-color:yellow" width="100" height="100"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="{$qual*5}" cy="{$qual*5}" r="{$qual*5}" fill="green" />
    </svg>
    <xsl:apply-templates select="engagement"/>
    <xsl:apply-templates select="description"/>
  </div>
</xsl:template>
</source>
 
<source lang="XML">
<!-- task - programmed as a big block for change -->
<xsl:template match="task">
  <div style="float:left;border-style:solid;margin:10px;padding:5px;width:300px">
    <!-- title -->
    <p style="font-size:120%;">   
      <xsl:value-of select="position()"/>.
      <xsl:value-of select="title"/>
    </p>
    <p><xsl:value-of select="description"/></p>
 
    <!-- difficulty -->
    <p>Difficulty: <xsl:value-of select="difficulty"/></p>   
    <svg width="210" height="10"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
      <rect x="5" y="1" width="{difficulty/@level * 20}" height="5" fill="red" />
      <rect x="4" y="0" width="201" height="6" fill="none" stroke="black" />
    </svg>
   
    <!-- completion -->
    <p>Completion: <xsl:value-of select="completion"/></p>
    <svg width="210" height="10"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">
      <rect x="5" y="1" width="{completion/@level * 20}" height="5" fill="red" />
      <rect x="4" y="0" width="201" height="6" fill="none" stroke="black" />
    </svg>
    <xsl:apply-templates select="ideas"/>
    <xsl:apply-templates select="results"/>
  </div>
</xsl:template>
 
</source>
 
Fichiers sources :
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/xpath-jungle-links-1.xsl xpath-jungle-links-1.xsl]
* [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/xpath-jungle-links-1.xml xpath-jungle-links-1.xml]
 
== Work in progress ==
(certains peuvent avoir besoin de documentation ou de modifications ... d'autres ne fonctionnent pas)
 
... Ainsi que de vieux trucs que je dois arranger
 
Actuel
* http://tecfa.unige.ch/guides/svg/ex/html5-xslt/
** http://tecfa.unige.ch/guides/svg/ex/html5-xslt/web-links.xml
 
A réparer un jour (project visualization)
* http://tecfa.unige.ch/guides/svg/ex/svg-xslt-visu/proj10-to-svg.xml
** http://tecfa.unige.ch/guides/svg/ex/svg-xslt-visu/proj10-to-svg.xml (fixed it a bit so that it displays)
 
Divers
* http://tecfa.unige.ch/guides/svg/ex/svg-xslt/
 
Cercles
* http://tecfa.unige.ch/guides/svg/ex/objects-in-circles/elements-on-circle-with-xslt.php
 
== Liens ==
 
'''Tutoriels'''
* [http://stackoverflow.com/questions/8056671/how-to-turn-an-xml-file-into-svg-using-xsl How to turn an XML file into SVG using XSL?], StackOverflow Question/Answer, 2011.
 
'''Tutoriels obsolètes'''
Links below point to texts that include useful information since they attempt more ambitious stuff. However, some portions are outdated, in particular complaints about bad SVG implementations and server-side instead of client-side use of XSLT. But XSLT coding itself looks just about fine to me, but then I am not an expert in either SVG or XSLT - [[User:Daniel K. Schneider|Daniel K. Schneider]] ([[User talk:Daniel K. Schneider|talk]]) 19:00, 20 March 2013 (CET)
 
* [http://www.w3.org/People/maxf/papers/2002-07-SVGOpen/svgopen.html Using XSLT and SVG together: a survey of case studies] by Max Froumentin, Vincent Hardy, W3C, W3C/Sun Microsystems Inc. (2004). I took some ideas from the introduction for my introduction.
* [http://alistapart.com/article/usingxml Using XML] by J. David Eisenberg July 19, 2002 in AList Apart.
* [http://svground.fr/xslt-pour-svg.php XSLT pour SVG] (in french)
* [http://duane.freeshell.net/code/SVG_Tutorial/SVG_Tutorial.html Hands-On SVG Tutorial Using XML and XSLT] by Duane Odom
* [http://www.xml.com/pub/a/2004/09/08/tree.html Automated Tree Drawing: XSLT and SVG] by by Jirka Kosek, September 08, 2004. This interesting article is only suitable for real programmers, since it includes string parsing code.
* [http://xml.chez.com/exemples/xslt/barchart/index.htm Réaliser un histogramme en SVG (XSLT 1.0)] by Emmanuel Lazinier (2001). A bar chart in french, but the code is fairly self-explaining ....
* [http://www.carto.net/svg/samples/xslt/ Using XSLT to create SVG content] from carto:net. I fixed the code a bit: [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/carto-net-example.xml xml], [http://tecfa.unige.ch/guides/svg/ex/html5-xslt/carto-net-example.xsl XSLT].
* [http://www-106.ibm.com/developerworks/education/transforming-xml/xmltosvg/ Transforming XML to SVG], IBM developer works (broken link, shame on IBM who used to have "stable" contents). by Doug Tidwell, 2000/2001
* [http://www.svgopen.com/2003/papers/CreatingSVGPieChartsThroughWebService/index.html Creating SVG Pie Charts through XSLT via a Web Service] by Paul Asman 2001, An experience Report. (The XSLT code should still work an can be used independently).
 
'''Bons exemples''''
* [http://www.treebuilder.de/default.asp?file=85704.xml extending SVG with XSLT]
** For example: the [http://www.treebuilder.de/default.asp?file=677959.xml 3D Pie Chart]. If you like math, have a look at the [http://www.treebuilder.de/svg/extentSVG/version1/torte.xslt XSLT code], if you know some math look at the [http://www.treebuilder.de/default.asp?file=906871.xml simple bar chart] and its [http://www.treebuilder.de/svg/extentSVG/version1/barchart.xslt stylesheet]
* [http://xslorenz.gothick.org.uk/ XSLorenz] Lorenz Attractor fractal figure using only an XML document styled by an attached XSLT stylesheet, by Matt Gibson (2011).
 
[[Category: Visualisation]]
[[Category: XML]]
[[Category: SVG]]

Dernière version du 21 avril 2020 à 10:55

Rediriger vers :

Doublon de la page de redirection. Le contenu de ces deux pages a été fusionné Lydie BOUFFLERS (discussion) 21 avril 2020 à 10:55 (CEST) (toujours accessible via l'historique)

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Tutoriel_XSLT_pour_générer_du_SVG&oldid=129678 »