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;
} |
