Infoforall

Javascript 13 : Créer des balises SVG avec Javascript

1 - Interface

2 - Création balise

3 - Création image

4 - Destruction

5 - Mini-projet

Cette activité va vous permettre de faire le point sur l'accès aux balises SVG depuis le code javascript.

Pourquoi faire cela ?

Pour être capable de dessiner des formes SVG en calculant leurs attributs plutôt que de les fixer en dur dans un code HTML.

1 - Interface

Nous allons commencer par définir une page HTML basique possèdant une balise DIV possèdant un ID "conteneurSVG", de façon à pouvoir placer nos SVG à l'intérieur.

Cette div possédera un attribut position réglé sur relative de façon à pouvoir placer des balises SVG à l'intérieur.

<!DOCTYPE html>

<html>


    <head>

        <meta charset="UTF-8" />

        <title>Créons des SVG à la volée</title>

        <meta http-equiv="content-Language" content="fr" />

        <link rel="stylesheet" href="css_chapitre12.css" />

        <script src="js_chapitre12.js"></script>

    </head>


    <body>

        <header>

            <h3>CREONS DES BALISES A LA VOLEE</h3>

        </header>


        <section>

            <h1>TITRE DE LA SECTION</h1>

            <div id="conteneurSVG">

            </div>

        </section>


        <footer>

            <p>Ici, c'est le footer.</p>

        </footer>


    </body>


</html>

Comme vous pouvez le voir, notre DIV ne contient rien pour l'instant. C'est normal, nous allons y mettre nos images SVG.

Et le CSS : (qu'on nommera "css_chapitre12.css")

On commence avec la div-conteneur :

#conteneurSVG {

    margin: 0px;

    padding: 0px;

    border: 1px solid #660000;

    width: 1200px;

    height: 600px;

    position: relative;

}

Et pour le JS :

function demarrage(){

}


window.addEventListener("load",demarrage);

01° Créer la page HTML et les fichers CSS et JS associés.

2 - Création des balises SVG

Nous allons voir ici comment créer une balise SVG.

Comme dans l'activité précédente, nous allons devoir créer une balise, lui donner des attributs puis lui ajouter d'autres balises (LINE, CIRCLE ...).

Par contre, nous allons créer une balise en utilisant un autre espace des noms, issu d'une source qualifiée, d'où le NS.

function demarrage(){

    var monSVG = document.createElementNS("http://www.w3.org/2000/svg",'svg');

    monSVG.style.width = '75px';

    monSVG.style.height = '150px';

    monSVG.id = 'image1';

    monSVG.style.position = 'absolute';

    monSVG.style.top = '200px';

    monSVG.style.top = '100px';

}

02° Quel est l'id de cette nouvelle image ?

Par contre, pour l'instant, notre image n'est insérée dans aucune balise du document. Nous voudrions la placer dans le conteneur. Il faut donc rajouter ceci pour rattacher notre image SVG au conteneur :

function demarrage(){

    var monSVG = document.createElementNS("http://www.w3.org/2000/svg",'svg');

    monSVG.style.width = '75px';

    monSVG.style.height = '150px';

    monSVG.id = 'image1';

    monSVG.style.position = 'absolute';

    monSVG.style.top = '200px';

    monSVG.style.top = '100px';


    var conteneur = document.getElementById("conteneurSVG");

    conteneur.appendChild(monSVG);

}

03° Tester cette nouvelle fonction : elle devrait rajouter une image SVG (vide) dans votre conteneur. En réalité, la seule chose que vous pourrez vérifier, c'est l'absence d'erreur : l'image est vide !

3 - Création de l'image

Bien, nous savons maintenant créer une balise SVG et définir certains de ces attributs.

Il nous reste à savoir remplir cette balise avec des dessins SVG : des balises LINE, CIRCLE ...

Il va falloir agir de la même manière de précédemment :

Nous allons ici créer un dessin composé par exemple d'une ligne et d'un cercle dans notre balise SVG ayant des dimensions de 75 px de large sur 150 px de haut (voir partie précédente).

function demarrage(){

    var monSVG = document.createElementNS("http://www.w3.org/2000/svg",'svg');

    monSVG.style.width = '75px';

    monSVG.style.height = '150px';

    monSVG.id = 'image1';

    monSVG.style.position = 'absolute';

    monSVG.style.top = '200px';

    monSVG.style.top = '100px';


    var conteneur = document.getElementById("conteneurSVG");

    conteneur.appendChild(monSVG);


    var maLigne1 = document.createElementNS("http://www.w3.org/2000/svg",'line');

    maLigne1.setAttribute('x1', '10px');

    maLigne1.setAttribute('y1', '10px');

    maLigne1.setAttribute('x2', '65px');

    maLigne1.setAttribute('y2', '140px');

    maLigne1.setAttribute('stroke','#BB3333');

    maLigne1.setAttribute('stroke-width',16);

    maLigne1.setAttribute('stroke-linecap','round');

}

J'ai rajouté ici les lignes permettant de créer une balise LINE et de définir certains de ses attributs. Il reste à la rattacjer à ma balise SVG.

function demarrage(){

    var monSVG = document.createElementNS("http://www.w3.org/2000/svg",'svg');

    monSVG.style.width = '75px';

    monSVG.style.height = '150px';

    monSVG.id = 'image1';

    monSVG.style.position = 'absolute';

    monSVG.style.top = '200px';

    monSVG.style.top = '100px';


    var conteneur = document.getElementById("conteneurSVG");

    conteneur.appendChild(monSVG);


    var maLigne1 = document.createElementNS("http://www.w3.org/2000/svg",'line');

    maLigne1.setAttribute('x1', '10px');

    maLigne1.setAttribute('y1', '10px');

    maLigne1.setAttribute('x2', '65px');

    maLigne1.setAttribute('y2', '140px');

    maLigne1.setAttribute('stroke','#BB3333');

    maLigne1.setAttribute('stroke-width',16);

    maLigne1.setAttribute('stroke-linecap','round');


    monSVG.appendChild(maLigne1);

}

04° Lancer le code pour vérifier qu'il fonctionne correctement.

Vous devriez obtenir ceci :

1 trait

05° Créer une seconde ligne ou un cercle que vous pourrez rattacher également à votre balise SVG.

1 trait

Si vous bloquez : il faut simplement créer une nouvelle ligne, définir ces caractéristiques et la rattacher à la même balise SVG que précédemment.

4 - Destruction

A faire

5 - Mini-projet

A faire