SVG o Scalar Vector Graphics son gráficos basados en lenguaje de marcado extendido que admiten animaciones bidimensionales de imágenes que mejoran la interactividad. Las especificaciones de SVG son estándares abiertos por World Wide Web Consortium definidos en archivos de texto XML. Estos archivos se pueden cambiar o crear con cualquier software de dibujo o editores de archivos de texto.
jQuery proporciona el complemento Drawsvg.js para dibujar o animar imágenes SVG en una variedad de formas para las páginas web de un desarrollador, que es muy liviano y fácil de usar. Las rutas de las imágenes SVG se dibujan en animación junto con las opciones de soporte de escalonamiento y aceleración. Descargue los archivos requeridos y guárdelos en su carpeta de trabajo para incluirlos en su código como se muestra en los siguientes programas.
Ejemplo 1:El siguiente ejemplo demuestra la animación simple de un rectángulo con un vértice circular, utilizando el complemento jQuery DrawSVG . El elemento de ruta es el elemento más importante para crear formas básicas como líneas y arcos en la biblioteca SVG. También puede crear formas complejas combinando muchas básicas. “d” es el parámetro para definir la forma del elemento.
- Programa:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<title>jQuery DrawSVG Plugin</title>
<link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" href="style.css">
<script async src=
"//assets.codepen.io/assets/embed/ei.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
</script>
<script src="jquery.drawsvg.min.js"></script>
<style>
body {
background: green;
text-align: center;
}
.height {
height: 10px;
}
svg {
width: 550px;
position: fixed; // for visibility
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<h1 style="color:white">GeeksforGeeks</h1>
<b>jQuery DrawSVG plugin</b>
<div class="wrapper">
<svg width="200" height="200"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 145 260">
<g stroke="#FFFFFF" stroke-width="3">
<!-- Z is for Close Path -->
<path d="M 10 10 H 90 V 90 H 10 L 10 10 Z"
fill="transparent" stroke="black" />
<!-- The Points -->
<circle cx="12" cy="12" r="10" fill="red" />
<circle cx="92" cy="94" r="10" fill="red" />
<circle cx="90" cy="14" r="10" fill="red" />
<circle cx="10" cy="92" r="10" fill="red" />
</g>
</svg>
</div>
<script>
// Initialization
var $svgVar = $('svg').drawsvg();
$svgVar.drawsvg('animate');
</script>
</body>
</html>
- Producción:
Ejemplo 2: El siguiente ejemplo demuestra el método drawsvg() junto con la configuración de opciones y el uso del método de devolución de llamada. La función de devolución de llamada se ejecuta una vez que se completa la animación.
- Programa:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery DrawSVG Plugin</title>
<link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" href="style.css">
<script async src=
"//assets.codepen.io/assets/embed/ei.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
</script>
<script src="jquery.drawsvg.min.js"></script>
<style>
body {
background: green;
text-align: center;
}
.height {
height: 10px;
}
/* SVG element is fixed for visibility */
svg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<h1 style="color:white">GeeksforGeeks </h1>
<b>DrawSVG plugin with callback method</b>
<div class="wrapper">
<svg viewBox="0 0 200 260"
style="background-color:#ffffff00"
xmlns="http://www.w3.org/2000/svg"
width="200" height="250">
<g stroke="#FFFFFF" stroke-width="3" fill="none">
<!--The shape of path element is defined
by "d" parameter -->
<path d="M157.068 33H165c4.77 0 9 4.464 9
9.706v202.758c0 5.243-4.288
9.536-9.524 9.536H10.524C5.288
255 1 250.707 1 245.464V42.707C1
37.464 5.06 33 10.017 33h9.203" />
<!--The "Move to" command is called with M -->
<path d="M103.302 33H157v45H19V33h52.72" />
<!--Co-ordinates by "d" are unitless in
the user coordinate system-->
<path d="M18.696 103h137.896v.17" />
<path d="M18.738 155h137.854v.068" />
<path d="M18.738 178h137.854v-.006" />
<path d="M18.696 227h137.868v-.21" />
</g>
</svg>
</div>
<div id="callbackDiv"></div>
<script>
var $svg = $("svg").drawsvg({
stagger: 2000, // Break is set to 2 seconds
duration: 5000,
callback: function() {
$('#callbackDiv').html('
<p>
<strong>Animation completed !</strong>
</p>
');
}
}).drawsvg("animate");
</script>
</body>
</html>
- Producción:
Ejemplo 3: El siguiente ejemplo demuestra el método drawsvg() con el evento de desplazamiento de página. La ruta está animada en un estilo de fundido de entrada y salida dependiendo del desplazamiento del usuario por la página hacia arriba y hacia abajo. La página actual debe ser desplazable como se muestra a continuación en el script.
- Programa:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>jQuery DrawSVG Plugin</title>
<link rel="stylesheet" href=
"https://fonts.googleapis.com/css?family=Open+Sans:400,600">
<link rel="stylesheet" href="style.css">
<script async src=
"//assets.codepen.io/assets/embed/ei.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js">
</script>
<script src="jquery.drawsvg.min.js"></script>
<style>
body {
background: green;
text-align: center;
}
.wrapper {
height: 1800px;
}
/* For visibility */
svg {
position: fixed;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
</head>
<body>
<h1 style="color:white">GeeksforGeeks</h1>
<b>Draw On Scroll, Please scroll down and up</b>
<div class="wrapper">
<svg style="background-color:#ffffff00"
xmlns="http://www.w3.org/2000/svg"
width="200" height="150"
viewBox="0 0 200 150">
<g stroke="#FFFFFF" stroke-width="2" fill="none">
<!--The path element is the general shape used in SVG -->
<path d="M137.484 69.432c0 37.536-30.425 67.96-67.97
67.96-37.535 0-67.953-30.424-67.953-67.96C1.56
31.9 31.98 1.474 69.516 1.474c37.544 0 67.97
30.425 67.97 67.958z" />
<path d="M118.228 68.774c0 26.78-21.702 48.488-48.496
48.488-26.772 0-48.48-21.71-48.48-48.488 0-26.776
21.708-48.48 48.48-48.48 26.794 0 48.496 21.704
48.496 48.48z" />
<path d="M37 68.998C37 50.773 51.55 36 69.495 36" />
<path d="M128.008 104.035l54.93 55.05c5.754 5.764 5.758
15.208.007 20.98l-2.886 2.894c-5.752 5.772-15.174
5.783-20.94.024l-55.128-55.078" />
</g>
</svg>
</div>
<script>
var $docVar = $(document),
$winVar = $(window),
$svgVar = $('svg').drawsvg(),
max = $docVar.height() - $winVar.height();
$winVar.on('scroll', function() {
var p = $winVar.scrollTop() / max;
$svgVar.drawsvg('progress', p);
});
</script>
</body>
</html>
- Salida: La animación siempre depende de la velocidad de desplazamiento.
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA