Dans cet exemple la manipulation se fait sur un dessin SVG contenu dans un fichier externe.
Click on the buttons to add something to the face :
//Identifier l'élément SVG
var svg = document.getElementById("faceSVG");
//Identifier les 4 boutons
var addHatBtn = document.getElementById("addHatBtn");
var addGlassesBtn = document.getElementById("addGlassesBtn");
var addMoustachesBtn = document.getElementById("addMoustachesBtn");
var addBeardBtn = document.getElementById("addBeardBtn");
//Car le SVG est un fichier externe, avant de pouvoir y accéder il faut attendre "onload"
svg.onload = function () {
//On veut accéder au DOM du svg externe, donc on utilise la élément.contentDocument
var face = svg.contentDocument;
//Après il suffit de changer la propriété de style "display" lors de l'événement onclick sur le bouton
//Hat
var hat = face.getElementById("hat");
hat.style.display = "none";
addHatBtn.onclick = function () {
hat.style.display = "inline";
}
//Glasses
var glasses = face.getElementById("glasses");
glasses.style.display = "none";
addGlassesBtn.onclick = function () {
glasses.style.display = "inline";
}
//Moustaches
var moustaches = face.getElementById("moustaches");
moustaches.style.display = "none";
addMoustachesBtn.onclick = function () {
moustaches.style.display = "inline";
}
//Beard
var beard = face.getElementById("beard");
beard.style.display = "none";
addBeardBtn.onclick = function () {
beard.style.display = "inline";
}
//Ajouter un bouton reset (à l'intérieur de la fonction si non pas accés aux variables des éléments SVG!!)
var resetBtn = document.getElementById("resetBtn");
resetBtn.onclick = function () {
hat.style.display = "none";
glasses.style.display = "none";
moustaches.style.display = "none";
beard.style.display = "none";
}
}