Q: inserer SVG generé par XSL en HTML
salut,
j'ai une XML qui contient des données numerique (pour etre exact: des resultats des tests dans une école), je voudrais bien etre capable de les presenter dans une sorte de graphique pour qu'on peut vite "voir" l'evolution d'elève.
pour cela j'ai construit une fichier xslt pour le transformer en svg (on utilize firefox, qui a du support pour svg donc c'est parfait
ben, pour faire des test j'ai la suite pour xml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
|
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xml2svg.xsl"?>
<list>
<value>1</value>
<value>7</value>
<value>6</value>
<value>2</value>
<value>3</value>
<value>5</value>
</list> |
en une XSLT
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" media-type="image/svg+xml" encoding="iso-8859-1" indent="yes" />
<xsl:template match="/">
<svg width="320" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<xsl:for-each select="list/value">
<xsl:element name="rect">
<xsl:variable name="_hi"><xsl:value-of select="."/></xsl:variable>
<xsl:attribute name="x"><xsl:value-of select="0+((position()-1)*20)"/></xsl:attribute>
<xsl:attribute name="y"><xsl:value-of select="100-($_hi*10)"/></xsl:attribute>
<xsl:attribute name="width">20</xsl:attribute>
<xsl:attribute name="height"><xsl:value-of select="$_hi*10"/></xsl:attribute>
<xsl:attribute name="style">fill:rgb(0,0,255)</xsl:attribute>
</xsl:element>
</xsl:for-each>
</svg>
</xsl:template>
</xsl:stylesheet> |
si j'ouvre le xml en firefox il prend le xslt automatiquement et le resultat est parfait (et moche en plus :))
pour le HTML je dois utillise "iframe"
Code:
1
2
|
<iframe src="test.svg" id="SVGFrame" width="320" height="100" frameborder="0" scrolling="no"/> |
la probleme c'est que apparament je ne peut que utillise l'attribu "src" pour charger mon svg, mais je doit etre capable de charger la svg directement sans que je dois la sauvegarder quelquepart apres avoir transformer le xml
est-ce que vous savez une methode qui peut m'aider ?
merci
(PS: les javascripts utillisez pour ka XSLT fonctionne parfaitement pour des tables qu'on peut just ajouter aver .INNERHTML , je voudrais faire just quelque chose comme ca avec mon svg)
