Bonjour,

Je voudrais ajouter dans une page HTML une image SVG avec la contrainte suivante :
- l'image SVG est créée dynamiquement en javascript par ma page

Sur le principe cela parait assez simple, il suffit d'ajouter dans l'arbre DOM un noeud "svg".

Dans la pratique l'image ne s'affiche pas dans firefox 2 (non testé avec d'autres navigateurs)

Voici un exemple de ce que je voudrais faire :
Code HTML : 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
26
27
28
29
30
31
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
	<title>Test SVG</title>
</head>
<body>
	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">
		<line x1="200" y1="0" x2="0" y2="200" stroke="black"/>
	</svg>
	<script type="text/javascript">
                window.addEventListener("load", function() {
                        var body = document.getElementsByTagName("body")[0];
                        var svg = document.createElement("svg");
                        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                        svg.setAttribute("version", "1.1");
                        svg.setAttribute("width", "400");
                        svg.setAttribute("height", "300");
                        var line = document.createElement("line");
                        line.setAttribute("x1", 200);
                        line.setAttribute("y1", 0);
                        line.setAttribute("x2", 0);
                        line.setAttribute("y2", 200);
                        line.setAttribute("stroke", "black");
                        svg.appendChild(line);
                        body.appendChild(svg);
                }, false);
        </script>
	<img width="400" height="300" alt="image svg" src="data:image/svg+xml,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.1&quot; width=&quot;400&quot; height=&quot;300&quot;&gt;&lt;line x1=&quot;200&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;200&quot; stroke-width=&quot;1&quot; stroke=&quot;black&quot;/&gt;&lt;/svg&gt;" />
</body>
</html>

- La première balise svg dans le code fait bien apparaitre l'image mais n'est pas générée dynamiquement. (c'est le résultat que je voudrait obtenir)
- Le code javascript ajoute dans l'arbre DOM le strict équivalent au premier SVG mais l'image ne s'affiche pas
- la balise "img" correspond à une astuce que j'ai voulu tenter en ajoutant le code du svg dans la balise "src" de l'image. Résultat l'image ne s'affiche pas. Par contre si on affiche l'image a partir du menu contextuel sur l'image en question -> l'image est correctement affiché

Si vous avez des idées, suggestions, ou tout autre information pouvant me faire avancer, merci d'avance.