Q: inserer SVG generé par XSL en HTML

**Rainlife** · 25/03/2007, 01h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**marcha** · 26/03/2007, 21h41

Salut,

J'ai pas tout a fait compris ton problème. Mais voici un bout de code
qui pourra peut-être te donner des pistes.

Tu peux intégrer du svg directement dans du html avec un namespace.
(en tout cas sur FireFox 2)

Voici un exemple qui injecte du svg avec innerHTML (c'est une page php
pour renvoyer le header content-type approprié)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<? header('Content-type: application/xhtml+xml');
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<script type="text/javascript" charset="utf-8">
<![CDATA[
 
function test() {
	var code = '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600px" height="400px">';
    code += '<polygon id="triangle" points="50,50 50,300 300,300" style=" fill:blue; stroke:black;"/>';
	code += '</svg>';
	document.getElementById('truc').innerHTML = code;
}
 
 
]]>
</script>
</head>
<body>
 
<div id='truc' onclick='test()'>un div</div>
 
</body>
</html>

Tu dois pouvoir aussi charger du xml avec Ajax et faire la transformation
XSLT avec javascript

Q: inserer SVG generé par XSL en HTML

JavaScript

Discussions similaires

Partager

Partager