Bonjour,
premièrement, je ne savais vraiment pas si cela touchait plus au graphisme ou au javascript, mais étant donné que le problème est au niveau d'une fonction javascript à utiliser, j'ai sélectionné cette section.
Par contre, des connaissances sont nécessaires pour y répondre, car le problème est aussi de savoir comment fonctionne la balise groupe (<g>) du SVG.
Je dispose en fait d'un fichier SVG simple, composé d'un script, d'un groupe contenant deux rectangles. Le clic sur un des rectangles lace une fonction (la fonction est bien lancée, pas de problème à ce niveau), cette fonction est censée modifier le contenu texte (et non un attribut, ce que je sais faire) de la balise groupe, j'ai essayé deux méthodes, sans aucun bon retour, voici mon code :

<?php
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
?>
<svg id="scene" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
	<script>
		function test(event) {
			document.getElementById("groupe").firstChild.data = '<rect id="rect1" x="0" y="0" width="100" height="150" fill="red"/>';
			// ou
			document.getElementById("groupe").innerHTML = '<rect id="rect1" x="0" y="0" width="100" height="150" fill="red"/>';
		}
	</script>
	<g id="groupe">
		<rect id="rect1" x="0" y="0" width="100%" height="100%" fill="red"/>
		<rect id="rect2" x="30" y="50" width="50" height="50" fill="blue" onclick="test();"/>
	</g>
</svg>

hello,

En fait ce qu'il faut savoir pour résoudre ce problème c'est que pour un fichier HTML ou un fihchier XML javascript se comporte différemment.

SVG c'est du XML et en javascript, pour du XML, la seule façon de modifier des noeuds c'est d'utiliser le DOM.

innerHTML ne marchera jamais, il faut tout faire avec createElement, appendChild et compagnie. svg a un namespace, c'est aussi possible de crée un element avec un namespace :
document.createElementNS('url du namespace','nom de l'élément');

Mais bon ici y'a pas besoin, c'est juste au cas ou tu as a insérer du svg dans une page XHTML

bon courage

Bon, je pense donc qu'il faille utiliser le DOM, mais j'ai cependant toujours plusieurs problèmes.
Avec le code suivant, la fonction devrait normalement placer un rectangle juste avant le groupe. Quand je regarde la source, le rectangle est bien présent, mais il n'apparait malheureusement pas sur l'image.

<?php
header("Content-type: image/svg+xml");
echo '<?xml version="1.0" encoding="ISO-8859-1"?>';
?>
<svg id="scene" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
	<script>
		function test(event) {
			var node = document.getElementById("groupe");
			var parent = node.parentNode;
			var rectangle = document.createElement("rect");
			rectangle.setAttribute("id", "rect3");
			rectangle.setAttribute("x", "200");
			rectangle.setAttribute("y", "0");
			rectangle.setAttribute("width", "100");
			rectangle.setAttribute("height", "150");
			rectangle.setAttribute("fill", "yellow");
			parent.insertBefore(rectangle, node);
		}
	</script>
	<g id="groupe">
		<rect id="rect1" x="0" y="0" width="100%" height="100%" fill="red"/>
		<rect id="rect2" x="30" y="50" width="50" height="50" fill="blue" onclick="test();"/>
	</g>
</svg>

Finalement, j'ai opté pour un document.location.reload(), c'est un peu radical, mais efficace.
Merci tout de même.