11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
j'essaie actuellement de faire une petite application de dessin en javascript+SVG.
Tout allait bien jusqu'au moment ou j'ai décidé de mettre une image de fond.


	function creerSvgVide(sIdSubstitut, iLargeur, iHauteur) {
		//Récupère le noeud élément (c'est-à-dire la référence vers la balise XHTML) qui sera remplacé par l'élément SVG
		var oSubstitut = document.getElementById(sIdSubstitut);
	 
		//Créé un élément SVG avec une largeur et une hauteur
		var oSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
		oSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
		//oSvg.setAttribute("xml:space", "preserve");
		oSvg.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");
		oSvg.setAttribute("width", iLargeur);
		oSvg.setAttribute("height", iHauteur);
		oSvg.setAttribute("version", "1.1");
		
		//Place l'élément SVG dans la page XHTML à la place de l'élément substitut
		oSubstitut.parentNode.replaceChild(oSvg, oSubstitut);
	 
		//Retourne la référence du SVG, afin de s'en servir avec l'autre fonction
		return oSvg;
	}


cette fonction me permet de creer mon elément svg.


ensuite pour faire par exemple un rond je fais ceci , qui fonctionne très bien.


			var ellipse =  document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
			ellipse.setAttribute('cx', event.pageX);
			ellipse.setAttribute('cy', event.pageY);
			ellipse.setAttribute('rx', "5");
			ellipse.setAttribute('ry', "5");
			ellipse.setAttribute('style',"fill:"+$("#color1").val()+"; ");
			obj.appendChild(ellipse);


pour une image :


		var img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
		img.setAttribute('width', "340");
		img.setAttribute('height', "193");
		img.setAttribute('x', '0');
		img.setAttribute('y', '0');
		img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', "http://basket.zen-creation.fr/images/terrain.png");
		obj.appendChild(img);


a l'affichage cela fonctionne tres bien sauf que quand j'exporte mon code pour en faire un fichier .svg j'ai un soucis, ma balise image n'est pas fermée.

Y a t-il un moyen en javascript de fermer ma balise image?
Ou savez-vous pourquoi mes balises sont fermés et pas la balise image?

merci