Hoy quiero hablaros de una de esas librerías que marcan tendencia, una auténtica flipada para aquellos diseñadores y
desarrolladores web que quieren dar un paso a la modernidad. Snap.svg es una librería desarrollada para la creación
de sitios web modernos que contiene una completa variedad de herramientas para la creación y manipulación
de Gráficos Vectoriales Bidimensionales (SVG).
Hoy en día hay una gran variedad de editores SVG, tales como:
- SVG Editor : Un editor svg online bastante práctico y fácil de utilizar.
- Inkscape : Un software de código libre muy completo para trabajar con imágenes SVG.
Así que no existe la excusa de tener que crear los elementos SVG a través de código, cualquiera de las dos herramientas
anteriores nos servirá para crear una imagen lista para ser utilizada con Snap.svg.
Si Snap.svg tiene algo de especial, es el potencial para crear animaciones, podemos manipular cualquier elemento SVG con
unas pocas líneas de código, podemos manejar eventos para saber cuando el usuario por ejemplo hace click en
un círculo, una elipse, un path, ... y realizar una determinada acción asociada a ese evento, un efecto bounce, rotar el
elemento, mover el elemento, hacerlo desaparecer, cambiar la escena, ... todo es cuestión de imaginación.
Por ejemplo, me he gastado un poco de tiempo para crear una imagen SVG con SVG editor,
es una imagen bastante básica en la cual podéis ver un sistema planetario al cual he podido dar vida con unas pocas de
líneas de código a través de Snap.svg, el código lo podéis encontrar justo después de la imagen.
EJEMPLO ...
<!DOCTYPE HTML>
<html>
<!-- By http://jquery-manual.blogspot.com -->
<head>
<title>Sistema planetario SVG</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="container">
<svg id="svg" viewBox="0 0 700 700" enable-background="new 0 0 700 700" xml:space="preserve">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<defs>
<linearGradient id="svg_4" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f2ea10"/>
<stop offset="1" stop-color="#fbfcf4"/>
</linearGradient>
<linearGradient id="svg_6" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#565542"/>
<stop offset="1" stop-color="#fbfcf4"/>
</linearGradient>
<linearGradient id="svg_8" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#f7efef"/>
<stop offset="1" stop-color="#d3dce5"/>
</linearGradient>
<linearGradient id="svg_11" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#1a32ed"/>
<stop offset="1" stop-color="#468cce"/>
</linearGradient>
<linearGradient id="svg_13" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#ff0000"/>
<stop offset="1" stop-color="#ea928a"/>
</linearGradient>
<radialGradient r="0.5" cy="0.5" cx="0.5" id="svg_15">
<stop stop-color="#040405" offset="0"/>
<stop stop-color="#2a2c30" offset="1"/>
</radialGradient>
</defs>
<g>
<title>Capa 1</title>
<rect fill="url(#svg_15)" stroke-width="5" x="-4.00002" y="2.00003" width="705.99997" height="700.00001" id="espacio"/>
<ellipse fill="url(#svg_4)" stroke-width="5" fill-opacity="0.80" cx="350" cy="350" id="sol" rx="58" ry="58"/>
<ellipse fill="url(#svg_6)" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.99" cx="274" cy="412" id="mercurio" rx="10" ry="10"/>
<ellipse fill="url(#svg_8)" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.99" cx="254" cy="468" id="venus" rx="16" ry="16"/>
<g id="tierra">
<ellipse fill="url(#svg_11)" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.99" cx="194" cy="525" id="planeta_tierra" rx="16" ry="16"/>
<ellipse fill="url(#svg_6)" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.99" cx="175" cy="499" rx="7" ry="7" id="luna"/>
</g>
<ellipse fill="url(#svg_13)" stroke-width="5" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0.99" cx="137" cy="585" id="marte" rx="13" ry="13"/>
</g>
</svg>
</div>
<script type="text/javascript" src="https://googledrive.com/host/0BykJCKCTF-FZSjJZeEZzTmpYaVk/js/jquery.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0BykJCKCTF-FZSjJZeEZzTmpYaVk/js/snap.svg.js"></script>
<script type="text/javascript">
$(function(){
var svg = Snap("#svg");
var espacio = svg.select("rect[id='espacio']");
var sol = svg.select("ellipse[id='sol']");
var mercurio = svg.select("ellipse[id='mercurio']");
var venus = svg.select("ellipse[id='venus']");
var tierra = svg.select("g[id='tierra']");
var planeta_tierra = svg.select("ellipse[id='planeta_tierra']");
var luna = svg.select("ellipse[id='luna']");
var marte = svg.select("ellipse[id='marte']");
function rotate_element(el, pointer, time){
el.animate({transform: 'r-360 ' + pointer.getBBox().cx + ' ' + pointer.getBBox().cy}, time, mina.linear, function(){
el.attr({transform: ""});
rotate_element(this, pointer, time);
});
};
function illuminate(el, time){
el.animate({fillOpacity: 1}, time, mina.linear, function(){
el.animate({fillOpacity: 0.90}, time, mina.linear, function(){
illuminate(el, time);
});
});
}
illuminate(sol, 500);
rotate_element(mercurio, sol, 6000);
rotate_element(venus, sol, 10000);
rotate_element(tierra, sol, 13500);
rotate_element(luna, planeta_tierra, 13500);
rotate_element(marte, sol, 16000);
});
</script>
</body>
</html>
No hay comentarios:
Publicar un comentario