Comunidad de diseño web y desarrollo en internet online

crear svg desde javascript

Citar            
MensajeEscrito el 24 Sep 2013 10:34 am
La idea es tener imagenes vectoriales desde javascript, podemos crear nuestro propio sistema de funciones graficas.

consideremos que tenemos unicamente esta plantilla de html

Código HTML :

<!DOCTYPE html><html id=ihtml><head id=ihead><meta charset="utf-8">
<script>
//aqui creamos toda nuestra pagina con funciones javascript
</script></head></html>


Por ejemplo dentro del tag<script></script>:

Código Javascript :

function gebi(i){return document.getElementById(i);}
function obj(i,t,p){var n=document.createElement(t);n.id=i;gebi(p).appendChild(n);}
function kxa(i,x,y,h,w,c){var n = gebi(i);unsel(i);n.style.border="1px solid "+c;n.style.position="absolute";n.style.left=x+"px";n.style.top=y+"px";if(h=='auto'){n.style.height=h;}else{n.style.height=h+"px";}if(w=='auto'){n.style.height=w;}else{n.style.width=w+"px";}}
function can(i,d,u,c,s){var k=gebi(i);k.style.borderRadius=d+"px "+u+"px "+c+"px "+s+"px";}
function aur (n){var z=((1+Math.pow(5,0.5))/2)*n;return Math.floor(z);}//funcion aurea maxima
//svgp crea objeto svg path
function svgp(i,p,d,c){sobj(i+p,'path',p);sans(i+p,"fill",c);sans(i+p,"d",d);}
//svgc crea objeto svg circle
function svgc(i,p,x,y,r,c){sobj(i+p,'circle',p);sans(i+p,"cx",x);sans(i+p,"cy",y);sans(i+p,"r",r);sans(i+p,"fill",c);} 
//creacion del objeto body
obj('ibody','body','ihtml');
//creacion de div idiv0 dentro de ibody
obj('idiv0','div','ibody');
kxa('idiv0','5','5','155',aur(155),'#bbbbbb');can('idiv0','10','10','10','10');   
//creacion de objeto svglogin dentro de idiv0
obj('svglogin',cl+'   LOGIN   '+cll,'idiv0');

svgp('p1','svglogin',"M356,283c-27,22-62,34-99,34c-36,0-71-12-99-35C83,309,50,404,50,448h412C462,405,428,310,356,283z",'black');
svgc('c1','svglogin','250','165','120','black');
svgc('c2','svglogin','299','303','60','white');
svgc('c3','svglogin','326','282','15','black');
svgp('p2','svglogin',"M254,395h-23v23h-24v22h-54v-38l78-78c8,21,26,38,49,46L254,395z",'white');


desde la consola web de firefox me da error
voy a mirar como solucionarlo

Por aukun

Claber

200 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 24 Sep 2013 11:01 am
ya lo solucione el objeto svglogin no es un objeto normal
tengo que crear una funcion especial para crear este objeto

Código Javascript :

function svgo(i,y,p){sobj(i,'svg',p);sans(i,'xlink','http://www.w3.org/1999/xlink');sans(i,'viewBox','0 0 512 512');sans(i,'enable-background','new 0 0 512 512');sans(i,'title',y);}

entonces todo qquedaria de la siguiente manera

Código Javascript :

function gebi(i){return document.getElementById(i);}
function obj(i,t,p){var n=document.createElement(t);n.id=i;gebi(p).appendChild(n);}
function kxa(i,x,y,h,w,c){var n = gebi(i);unsel(i);n.style.border="1px solid "+c;n.style.position="absolute";n.style.left=x+"px";n.style.top=y+"px";if(h=='auto'){n.style.height=h;}else{n.style.height=h+"px";}if(w=='auto'){n.style.height=w;}else{n.style.width=w+"px";}}
function can(i,d,u,c,s){var k=gebi(i);k.style.borderRadius=d+"px "+u+"px "+c+"px "+s+"px";}
function aur (n){var z=((1+Math.pow(5,0.5))/2)*n;return Math.floor(z);}//funcion aurea maxima
//svgp crea objeto svg path
function svgp(i,p,d,c){sobj(i+p,'path',p);sans(i+p,"fill",c);sans(i+p,"d",d);}
//svgc crea objeto svg circle
function svgc(i,p,x,y,r,c){sobj(i+p,'circle',p);sans(i+p,"cx",x);sans(i+p,"cy",y);sans(i+p,"r",r);sans(i+p,"fill",c);} 
//creacion del objeto body
obj('ibody','body','ihtml');
//creacion de div idiv0 dentro de ibody
obj('idiv0','div','ibody');
kxa('idiv0','5','5','155',aur(155),'#bbbbbb');can('idiv0','10','10','10','10');   
//creacion de objetosvg como svglogin dentro de idiv0
svgo('svglogin',cl+'   LOGIN   '+cll,'idiv0');

svgp('p1','svglogin',"M356,283c-27,22-62,34-99,34c-36,0-71-12-99-35C83,309,50,404,50,448h412C462,405,428,310,356,283z",'black');
svgc('c1','svglogin','250','165','120','black');
svgc('c2','svglogin','299','303','60','white');
svgc('c3','svglogin','326','282','15','black');
svgp('p2','svglogin',"M254,395h-23v23h-24v22h-54v-38l78-78c8,21,26,38,49,46L254,395z",'white');


supongo que esto es aplicable a todos los tipos de etiquetas posibles que encontrasemos en un svg ya sea para aplicar gradientes de color o movimientos de translacion de elementos svg, aunque creo que existen todavia incompatibilidades entre browsers supongo que w3c esta en ello todavia

Aqui os dejo un buen ejemplo de svg con funciones de translacion (unicamente con codigo svg)
tetris.svg

Por aukun

Claber

200 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 24 Sep 2013 01:07 pm
jjaajaja me olvide de la funcion sans:

Código Javascript :

function sans(i,t,d){var e=gebi(i);e.setAttributeNS(null,t,d);}

Por aukun

Claber

200 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 24 Sep 2013 01:19 pm
la definitiva

Código Javascript :

<!DOCTYPE html><html id=ihtml><head id=ihead><meta 

charset="utf-8">
<script>
function gebi(i){return document.getElementById(i);}
function sobj(i,t,p){var u='http://www.w3.org/2000/svg';var 

n=document.createElementNS(u,t);n.id=i;gebi(p).appendChild(n);

}
function 

svgo(i,y,p){sobj(i,'svg',p);sans(i,'xlink','http://www.w3.org/

1999/xlink');sans(i,'viewBox','0 0 512 

512');sans(i,'enable-background','new 0 0 512 

512');sans(i,'title',y);}
function unsel(i){var e=gebi(i);var s = e.style;s.userSelect = 

"none";s.webkitUserSelect = "none";s.MozUserSelect = 

"none";e.setAttribute("unselectable", "on");}
function obj(i,t,p){var 

n=document.createElement(t);n.id=i;gebi(p).appendChild(n);}
function kxa(i,x,y,h,w,c){var n = 

gebi(i);unsel(i);n.style.border="1px solid 

"+c;n.style.position="absolute";n.style.left=x+"px";n.style.to

p=y+"px";if(h=='auto'){n.style.height=h;}else{n.style.height=h

+"px";}if(w=='auto'){n.style.height=w;}else{n.style.width=w+"p

x";}}
function can(i,d,u,c,s){var 

k=gebi(i);k.style.borderRadius=d+"px "+u+"px "+c+"px 

"+s+"px";}

function aur (n){var z=((1+Math.pow(5,0.5))/2)*n;return 

Math.floor(z);}//funcion aurea maxima
function sobj(i,t,p){var u='http://www.w3.org/2000/svg';var 

n=document.createElementNS(u,t);n.id=i;gebi(p).appendChild(n);

}
//svgp crea objeto svg path
function 

svgp(i,p,d,c){sobj(i+p,'path',p);sans(i+p,"fill",c);sans(i+p,"

d",d);}
function sans(i,t,d){var 

e=gebi(i);e.setAttributeNS(null,t,d);}
//svgc crea objeto svg circle
function 

svgc(i,p,x,y,r,c){sobj(i+p,'circle',p);sans(i+p,"cx",x);sans(i

+p,"cy",y);sans(i+p,"r",r);sans(i+p,"fill",c);} 
//creacion del objeto body
obj('ibody','body','ihtml');
//creacion de div idiv0 dentro de ibody
obj('idiv0','div','ibody');
kxa('idiv0','5','5','155','155','#bbbbbb');can('idiv0','10','1

0','10','10');
var cl=String.fromCharCode(13)+String.fromCharCode(10);var 

cll=cl+cl;   
//creacion de objetosvg como svglogin dentro de idiv0
svgo('svglogin',cl+'   LOGIN   '+cll,'idiv0');

svgp('p1','svglogin',"M356,283c-27,22-62,34-99,34c-36,0-71-12-

99-35C83,309,50,404,50,448h412C462,405,428,310,356,283z",'blac

k');
svgc('c1','svglogin','250','165','120','black');
svgc('c2','svglogin','299','303','60','white');
svgc('c3','svglogin','326','282','15','black');
svgp('p2','svglogin',"M254,395h-23v23h-24v22h-54v-38l78-78c8,2

1,26,38,49,46L254,395z",'white');
</script></head></html>

Por aukun

Claber

200 de clabLevel



Genero:Masculino  

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.