Discussion :

[bronon]

Bonsoir à tous,
Ce soir je galère depuis quelques heures sur un problème de SVG. Je veux tracer des « boutons » sur une page formulaire, pour ce faire j'ai un cadre (un rectangle en fait) avec un fond en dégradé tout marche bien jusque-là. Mon problème est quand je veux insérer un motif graphique venant d'Illustrator (type revenir en arrière ou réinitialiser) dans le rectangle de départ j'ai mis le fond en définition et lorsque je veux importer le graphisme, en utilisant JavaScript, rien ne fonctionne.
D'avance merci pour vos judicieux conseils.
Mon code est le suivant

La def :

Code :

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

1
2
3
4
5
6
7
8
	<svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" display="inline">
	<defs>
		<g id="graphismeAR">
			<polyline fill="navy" points="121.264,45.031 118.355,45.263 118.361,42.427 "/>
			<path fill="navy" stroke="navy" stroke-width="1" d="M119.798,43.769c0.668-0.621,1.563-0.999,2.549-1 c2.072,0,3.75,1.68,3.75,3.75c0,2.072-1.678,3.751-3.75,3.751c-1.59,0-2.945-0.986-3.493-2.379"/>
		</g>
	</defs>
	</svg>

Le js pour l'insertion

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
function boutonPaletteAR(cible) {
	var svgns="http://www.w3.org/2000/svg";
 	$("#zonePalette"+cible).append(boutonPaletteContour(cible));
	var group=document.createElementNS(svgns, "g");
	group.setAttributeNS(null, 'id', 'conteneurAR'+cible);
	$("#zonePalette"+cible).append(group);
	var contenu = document.createElementNS(svgns, "use");	//	<use xlink:href="#shape" x="50" y="50" />
	contenu.setAttributeNS(null, 'xlink', href='#graphismeAR');
	contenu.setAttributeNS(null, 'x', 2);
	contenu.setAttributeNS(null, 'y', 2);
	$("#conteneurAR"+cible).append(contenu);
	return;
}

[lysandro]

Bonjour,

Je pense que
contenu.setAttributeNS(null, 'xlink', href='#graphismeAR'); ;
s'écrit plutôt
contenu.setAttributeNS(svgns, 'xlink:href','#graphismeAR'); .
Juste en passant vu que je n'y connais rien

edit:
En fait, indépendamment du fait de savoir si ton code est correct ou pas, il te faut :
- rajouter l'espace de nom 'xlink' au document qui contiendra ta balise 'use' :
-- si c'est un document svg :

Code svg :

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

1
2
3
4
 
<svg version="1.1" id="svg1" display="inline"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

- à rajouter aussi lors de la création de l'attribut 'xlink:href' :

Code javascript :

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

1
2
3
4
5
6
7
8
function boutonPaletteAR(cible) {
	var svgns="http://www.w3.org/2000/svg";
	var xlinkns="http://www.w3.org/1999/xlink";
       //...
	var contenu = document.createElementNS(svgns, "use");	//	<use xlink:href="#shape" x="50" y="50" />
	contenu.setAttributeNS(xlinkns, 'xlink:href', '#graphismeAR');
     // ...
}

edit bis:
Pas besoin de rajouter 'xlink' au document

Code javascript :

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

1
2
3
4
5
6
7
8
function boutonPaletteAR(cible) {
	var svgns="http://www.w3.org/2000/svg";
	var xlinkns="http://www.w3.org/1999/xlink";
       //...
	var contenu = document.createElementNS(svgns, "use");	//	<use xlink:href="#shape" x="50" y="50" />
	contenu.setAttributeNS(xlinkns, 'xlink:href', '#graphismeAR');
     // ...
}

devrait suffire. Pour mes tests ça fonctionne.

[bronon]

Merci pour ta réponse mais elle ne fonctionne pas mais ne génère pas d'erreur
Cdlt

[lysandro]

Je ne sais pas si on est notifié des "edit", alors à tout hasard :

L'attribut 'href', utilisé dans la balise 'use' définie dans SVG, est défini dans XLINK. Il faut le créer en relation à son espace de nom pour que ça fonctionne.

contenu.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', '#graphismeAR');

[bronon]

Bonjour,

Je pense que
contenu.setAttributeNS(null, 'xlink', href='#graphismeAR'); ;
s'écrit plutôt
contenu.setAttributeNS(svgns, 'xlink:href','#graphismeAR'); .
Juste en passant vu que je n'y connais rien

edit:
En fait, indépendamment du fait de savoir si ton code est correct ou pas, il te faut :
- rajouter l'espace de nom 'xlink' au document qui contiendra ta balise 'use' :
-- si c'est un document svg :

Code svg :

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

1
2
3
4
 
<svg version="1.1" id="svg1" display="inline"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

- à rajouter aussi lors de la création de l'attribut 'xlink:href' :

Code javascript :

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

1
2
3
4
5
6
7
8
function boutonPaletteAR(cible) {
	var svgns="http://www.w3.org/2000/svg";
	var xlinkns="http://www.w3.org/1999/xlink";
       //...
	var contenu = document.createElementNS(svgns, "use");	//	<use xlink:href="#shape" x="50" y="50" />
	contenu.setAttributeNS(xlinkns, 'xlink:href', '#graphismeAR');
     // ...
}

edit bis:
Pas besoin de rajouter 'xlink' au document

Code javascript :

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

1
2
3
4
5
6
7
8
function boutonPaletteAR(cible) {
	var svgns="http://www.w3.org/2000/svg";
	var xlinkns="http://www.w3.org/1999/xlink";
       //...
	var contenu = document.createElementNS(svgns, "use");	//	<use xlink:href="#shape" x="50" y="50" />
	contenu.setAttributeNS(xlinkns, 'href', '#graphismeAR');
     // ...
}

devrait suffire. Pour mes tests ça fonctionne.

NICKEL de chez nickel, j'avais oublié la directive xlinkns="http://www.w3.org/1999/xlink".
Merci encore pour ton assistance