Ajout d'une image SVG dans le code d'une page

**Mobius** · 26/05/2009, 19h58

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.

**emmanuel.remy** · 27/05/2009, 01h42

SAlut,

La création d'un élement se fait sur un namespace. Et ajouter l'attribut xmlns a posteriori n'a pas de sens puisque l'élément est déjà créé. Il faut donc pouvoir le spécifier à la création de l'élément. C'est pourquoi le DOM2 prévoit l'utilisation d'une fonction createElementNS, le pendant de createElement. Donc voici le code qui s'applique:

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
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.createElementNS("http://www.w3.org/2000/svg", "svg");
			svg.setAttribute("version", "1.1");
			svg.setAttribute("width", "400");
			svg.setAttribute("height", "300");
			var line = document.createElementNS("http://www.w3.org/2000/svg","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>
</body>
</html>

Note quand même que toutes les versions de IE n'implémentent pas cette fonction du DOM2 (mais il ne gèrent pas nativement non plus le SVG...)

ERE

**Mobius** · 27/05/2009, 16h37

Effectivement cela semble plus logique et en plus ca marche à merveille

Merci beaucoup pour ce coup de pouce.

Ajout d'une image SVG dans le code d'une page

JavaScript

Discussions similaires

Partager

Partager