Dans un précédent article, je vous donnais la traduction du guide de démarrage rapide de cette bibliothèque.
Dans cet article, je vais vous montrer comment créer simplement de nouvelles formes SVG via javascript. Je part du principe que vous avez lu déjà le guide de démarrage rapide et que vous avez commencé à jouer un peu avec.
Donc votre serveur web est déjà lancé. Si ce n'est pas le cas, dans le répertoire SVGWeb on tappe :
java -jar src/tools/webserver.jarcrée deux documents dans le répertoire de test :
- test.html
- test.svg
<!doctype html>
<!-- This file provides a simple example of directly embedding SVG into a page
as well as pulling SVG in from an external file. -->
<html>
<head>
<!-- The svg.js file must be the first JavaScript file you pull into your
page; provide the optional data-path attribute if the
svg.js/svg.swf/svg.htc files are stored in a different directory from
where your HTML page is. -->
<script src="../../src/svg.js" data-path="../../src"></script>
<!-- By default Flash is used for rendering on IE and the native SVG support
is used on other browsers. You can override this and force Flash to
do all the rendering on all browsers in two ways; either provide
a META tag as follows:
<meta name="svg.render.forceflash" content="true" />
Or change the URL of your page to have the following query variable:
helloworld.html?svg.render.forceflash=true
-->
<!-- Example JavaScript block that shows scripting our SVG -->
<script type="text/javascript">
window.onload = function() {
// SVG on the page should only be manipulated after the page is
// finished loading
}
</script>
</head>
<body>
<!-- Embed an external SVG file using the following syntax; it must
be done exactly as given, rather than using the EMBED tag. Change
the data and src attributes to point to where your SVG file is
relative to the HTML page. -->
<!--[if IE]>
<object src="test.svg" classid="image/svg+xml"
width="200" height="200"
id="mySVGObject">
<![endif]-->
<!--[if !IE]>-->
<object data="test.svg" type="image/svg+xml"
width="800" height="600"
id="mySVGObject">
<!--<![endif]-->
</object>
</body>
</html>
comme vous pouvez le constater ce n'est que le fichier helloworld.html modifié pour nos besoins. Les deux lignes importantes dans ce fichier sont :
<object src="test.svg" classid="image/svg+xml"et
<object data="test.svg" type="image/svg+xml"qui permettent de pointer vers notre fichier svg. J'ai aussi définis une hauteur et une largeur de 800*600 sur ce document avec les deux lignes suivantes.
Passons maintenant à notre fichier svg.
<?xml version="1.0"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800" height="600"
style="background-color: #D2B48C;"
onload="loaded()">
<script type="text/javascript"><![CDATA[
function loaded() {
// change onloadFunc to point to your real onload function that you
// want called when the page is truly ready
var onloadFunc = doload;
if (top.svgweb) {
top.svgweb.addOnLoad(onloadFunc, true, window);
} else {
onloadFunc();
}
}
function doload() {
}
]]></script>
</svg>c'est vraiment la forme la plus simple possible d'un fichier SVG. On remarquera tout de même que j'ai choisit une couleur de fond :
style="background-color: #D2B48C;"
et que j'ai définis une hauteur et une largeur :
width="800" height="600"
si vous ouvrez votre navigateur sur test.html vous aurez ceci :
plutôt basique n'est ce pas ?
tout notre travail maintenant va se faire à l'interieur de la fonction doload()
voyons donc comment ajouter des formes simples :
Un Cercle
dans la fonction doload on insère :
var el = document.createElementNS(svgns, 'circle');
el.setAttribute('cx', 100);
el.setAttribute('cy', 100);
el.setAttribute('r', 50);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);
ce qui nous donne ceci :
détaillons maintenant ce bout de code :
var el = document.createElementNS(svgns, 'circle');
on cré une variable el qui est un élément svg de type cercle,
el.setAttribute('cx', 100);
el.setAttribute('cy', 100);
on lui indique les coordoné du centre x et y
el.setAttribute('r', 50);
un rayon
el.setAttribute('fill', '#223FA3');
une couleur
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
une largeur de contour et une couleur de contour. Simple n'est ce pas ?
ensuite, il va falloir l'afficher car pour le moment ce n'est qu'une variable. On va donc chercher le père du document à savoir le premier élément svg de la page :
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
et nous lui ajoutons notre cercle comme enfant :
root.appendChild(el);
Un rectangle
pour réaliser un rectangle, ce n'est pas bien différent je vais donc vous donner le code qui s'explique de lui même :
var el = document.createElementNS(svgns, 'rect');
el.setAttribute('x', 100);
el.setAttribute('y', 100);
el.setAttribute('width', 50);
el.setAttribute('height',200);
el.setAttribute('fill', '#223FA3');
el.setAttribute('stroke-width', '1px');
el.setAttribute('stroke', 'black');
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);
Les Images
Un peu différent, l'insertion d'une image se passe comme suit :
el = document.createElementNS(svgns, 'image');
el.setAttribute('x', 200);
el.setAttribute('y', 200);
el.setAttribute('width', 50);
el.setAttribute('height', 50);
el.setAttributeNS(xlinkns, "href", "image.jpg");
var root = document.getElementsByTagNameNS(svgns, 'svg')[0];
root.appendChild(el);
Vous pouvez remarquer que cela se passe comme un rectangle , des coordonées x et y, une largeur, un hauteur. l'élément à retenir ici est :
el.setAttributeNS(xlinkns, "href", "image.jpg");en effet puisque notre image est un lien, on va devoir utiliser
setAttributeNS au lieu de setAttribute mais c'est la seule chose qui change.Voila pour ce petit tour très basique des formes SVG via javascript, sachez que les possibilités sont bien évidement bien plus larges que se ttrès rapide tour d'horizon, mais nous y reviendrons bientôt.
Aucun commentaire:
Enregistrer un commentaire