Unitat 11. Scalable Vector Graphics. Integració dinàmica al DOM.
Contingut.
L’element SVG permet crear un canvas on cada un dels elements és identificable i té els seus propis atributs. Aquest fet permet que es pugui controlar tota la imatge de la pantalla com a objectes independents.
En aquesta unitat ens centrarem en:
- Conèixer i implementar els tipus de formes al SVG.
- Controlar els atributs dels elements de l’SVG.
- Integrar elements al DOM de forma dinàmica.
- Afegir controls d’esdeveniment amb addEventListener.
Crear SVG i inserir elements.
Crear SVG i afegir un objecte.
[cc lang=”HTML”]
[/cc]
Tipus de formes al SVG.
See the Pen svg-1 by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.light
Dins un document “svg.html” has de fer tots els exercicis de svg.
Exercici 1
Amb les formes disponibles a SVG dibuixa un paissatge tipus infantil (casa, muntanya, camí, sol, …).
Manipular atributs dinàmicament.
Els elements que s’insereixen dins un SVG poden controlar esdeveniments.En aquest cas mostram un exemple amb l’esdeveniment click sobre l’element, per implementar afegim dos conceptes al codi:
- Afegim control esdeveniment i enviam this com a paràmetre, és el propi element que crida l’acció de l’esdeveniment. Oberva la següent línia. Crida a una funció de manera semblant a com ho hem fet durant el curs. Fixa’t amb que estam enviant el propi objecte THIS!! mitjançant paràmetre.
[cc lang=”HTML”]
[/cc] - Implementam la funció requerida per l’acció. Per SVG hem d’usar l’instrucció .setAttributeNS
[cc lang=”javascript”]
function baixa(t){
var svg = document.getElementById($(t).attr(“id”));
svg.setAttributeNS(null, “cy”, parseInt($(t).attr(“cy”))+1);
}
[/cc]
El següent exemple implementa un programa que detecta cada vegada que feim click sobre un dels objectes i els canvia de posició.
See the Pen SVG- Moviment, atributs dels objectes svg by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.light
Exercici 2
Reimplementa el codi anterior, fes que cada vegada que es faci click sobre un element canvii la seva mida a +5px. I quan es faci doble click (cerca als esdeveniments) canvii -5px.
Exercici 3
Fes un diagrama de selecció d’un cercle. Ha de tenir la forma de selecció del gif insertat a l’unitat actual. Dibuixa sobre paper per calcular els 9 punts i relaciona els punts del diagrama respecte als del cercle.
Integrar elements al DOM.
Un dels objectius bàsics d’aquestes unitats és la d’aprendre a crear HTML que creixin de manera dinàmica i, a demés, es puguin controlar cada un dels objectes que formen l’estructura.
Per aconseguir aquests objectius hem de treballar amb l’inserció dinàmica al Document de Model d’Objectes (DOM). Són instruccions que des de Javascript ens permeten generar elements HTML identificats i classificats en el moment de la seva creació.
Per integrar un nou element ho feim seguint les passes:
- Saber a quin identificador hem de penjar la nova creació. (També es podria possar directament al l’arrel del document però no és el nostre cas).
[cc lang=”HTML”][/cc]
- Crear un nou element amb l’instrucció createElementNS() que ens crea un SVG amb interacció. La pregunta és, quina diferència hi ha entre createElement i createElementNS? aquí la resposta, la conclusió és que si volem manipular atributs dinàmicament hem de usar createElementNS. Documentació de createElementNS.
[cc lang=”javascript”]
var svg1 = document.createElementNS(“http://www.w3.org/2000/svg”, “svg”);
[/cc] - Per afegir un element seguim les passes: crear element, definir atributs i afegir al canvas svg.
[cc lang=”javascript”]
var cir1 = document.vcreateElementNS(“http://www.w3.org/2000/svg”, “circle”);
cir1.setAttribute(“id”,”node”+i);
cir1.setAttribute(“cx”, Math.floor(Math.random() * 700));
cir1.setAttribute(“cy”, Math.floor(Math.random() * 350));
cir1.setAttribute(“r”, “30”);
cir1.setAttribute(“fill”, “blue”);
svg1.appendChild(cir1);
[/cc] - Control d’esdeveniments de control:
[cc lang=”javascript”]
document.getElementById(“node”+i).addEventListener(“click”,function(){simple2(this)});[/cc]
Observa la instrucció que s’usa per afegir un esdeveniment de control:- agafam (node + i) l’element per id
- addEventListener(“click”,…), és com afegir un onclick dins el tag HTML.
- function(){simple2(this)}—->declaram la funció que volem que s’executi.
Observa l’execució al codi següent, on cada vegada que feim click sobre crear un nou node ens genera un node amb id node+i (on ‘i’ es va sumant a cada creació de node) a una posició aletòria i se si afegeix un control d’esdeveniment que crida la funció simple2(this).
Simple2 mira dins la informació de paràmetre (li passam this) les dades id i posició.
See the Pen SVG-Integrar Elements a DOM by Pere Antoni Melisucre (@pere-antoni-melisucre) on CodePen.light
Exercici 4
- Afegir informació que ha de sortir per pantalla, per exemple sobre un p.
De cada vegada que es crei una nova bolla. - S’ha de controlar que sols es pitji una vegada sobre el botó “Crea Node cada tres segons”.
- Crea un input https://www.w3schools.com/tags/tag_input.asp que ens permeti triar el radi de creació dels següents elements.
- Crea un input type color que ens permeti triar el color dels següents elements
- Si feim dos clicks sobre un element ha de desaparèixer.
- Crear i mostrar un llistat de elements que aparèixen i què desaparèixen. Actualitzada. Explica com ho faràs i implementa desprès.
- Calcula la distància entre dos punts. click i click. Ha de sortir com a info.
- Fes una línia entre dos elements. dobleclick i dobleclick (explica)