Utilisation de <defs> et javascript
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:
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:
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;
} |
