Tutorial

Elément SVG interactif et directive Angularjs

29 Mar , 2015  

Dans l’article suivant, nous allons voir comment créer une directive injectant un élément SVG,et gérer une interaction simple. En effet c’est sur cette base, relativement simple, que j’ai crée par exemple ce groupe de cartes interactives des résultats de élections départementales en France en 2015 : voir ici .

Plusieurs personnes m’ont questionné sur ces directives injectant des éléments SVG et la gestion de l’interaction j’ai donc décidé de partager ici un petit exemple contenant le principe de base que j’ai utilisé. Pré-requis: connaissance du javascript et les bases de l’utilisation du framework AngularJS. Tout d’abord, nous allons créer un document SVG  contenant un rectangle et un cercle. Notre demo consistera à faire changer le cercle de couleur à l’évènement ‘click’ et de lui donner une nouvelle couleur aléatoire.

1- Préparation du fichier SVG (créé au préalable avec InkScape, Illustrator, etc). Pour pouvoir manipuler les éléments de notre fichier SVG il nous faut tout d’abord ajouter des attributs aux éléments auxquels nous souhaitons avoir accès (avec un éditeur de texte ou un logiciel type InkScape), afin d’y avoir accès dans le DOM. Ici  donnons simplement l’attribut id=”cercle” à l’élément path qui représente le cercle.

[html]
<path id="cercle" code du cercle />
[/html]

 2- La directive.

Définissons d’abord notre application.

[javascript]
var app = angular.module(‘svgdemoApp’, []);
[/javascript]

Créons notre directive que nous appellerons svgDemo. Dans un premier temps nous incluons notre fichier .SVG sous forme de template :

[javascript]
app.directive(‘svgDemo’,[ function(){
return {
restrict: ‘E’,
templateUrl: ‘test.svg’,
link: function (scope, element, attrs) {

}
}
}]);
[/javascript]

Nous choisissons de restreindre l’utilisation de la directive à un élément – Restrict E – , et pointons l’url du template qu’il contiendra vers notre fichier svg.

Appelons  là dans une page HTML.

[html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <title>Angularjs+SVG</title>
</head>
<body ng-app="svgdemoApp">
    <div>
        <svg-demo></svg-demo>
    </div>
</body>
</html>
[/html]

Si nous testons notre application à ce stade, nous constatons notre fichier SVG apparait bien.

Maintenant donnons un peu d’interactivité à notre cercle en lui ajoutant la directive ‘ng-click’, puis en définissant un écouteur d’évènement. Pour cela il suffit de récupérer l’élément #cercle comme nous le ferions pour un élément de DOM classique, en utilisant la méthode querySelector (ES6 Powa!) . Et définissons qu’à l’évènement click nous modifions l’attribut “fill” de notre élément <path></path> en lui assignant une couleur générée aléatoirement. Nous ajoutons cela au sein de la fonction link qui intervient lorsque notre élément est prêt, et que nous pouvons donc agir dessus:

[js language=”true”]

link: function (scope, element, attrs) {

var cercle = element[0].querySelector(‘#cercle’);
cercle.setAttribute("ng-click", "clickHandler()");
scope.clickHandler=function(){
cercle.setAttribute("fill", "#"+Math.floor(Math.random()*16777215).toString(16));
}

}

[/js]

Si nous testons à nouveau notre application, nous constatons que rien ne se passe ! En effet, pour que notre template, et donc notre élément, soit intérprété par Angularjs dans notre vue avec ses fonctionnalités il nous faut utiliser $compile, qui permet , comme son nom l’indique, de compiler un template en un véritable élément AngularJS.  (pour de plus amples informations sur la fonction compile() d’Angularjs, rendez-vous sur la documentation officielle) Nous rajoutons donc le code suivant:

[js]
link: function (scope, element, attrs) {

var cercle = element[0].querySelector(‘#cercle’);
cercle.setAttribute("ng-click", "clickHandler()");
scope.clickHandler=function(){
cercle.setAttribute("fill", "#"+Math.floor(Math.random()*16777215).toString(16));
}
$compile(cercle)(scope);
}
[/js]

Et voila:

Notre cercle change maintenant bien de couleur à chaque évènement click. Sur cette base, très simple pour notre exemple, il est possible de créer des directives contenant des éléments SVG avec des interactions beaucoup plus complexes, comme par exemple sur ce groupe de  cartes interactives.

, ,


One Response

  1. Zaïd dit :

    Merci pour ce mini tuto bien pratique !!

Leave a Reply

Your email address will not be published. Required fields are marked *

*