Share
No hace falta decir que SVG no se usa tanto como muchas personas en la comunidad de desarrollo web pueden creer que debería ser. Dejando de lado el debate, en este tutorial, demostraré cómo usar SVG en línea, cubriendo una variedad de técnicas y explorando la interacción entre la página web y el gráfico. Cuando se usa junto con otros estándares emergentes en HTML5, JavaScript y CSS3, los SVG en línea pueden aumentar significativamente la experiencia del usuario.
Puede interactuar con los elementos SVG utilizando técnicas DOM, como lo haría con otros elementos de la página web.
En este tutorial, vamos a trabajar con un ejemplo práctico de un SVG en línea mediante la creación de un componente simple que representa una cubierta de grabación. El registro girará y el usuario podrá interactuar con él, presionando para reducir la velocidad y soltando para acelerarlo nuevamente. El SVG también contendrá un botón en el que los usuarios pueden hacer clic para cambiar el registro, lo que hace que su apariencia se modifique ligeramente. Los elementos SVG visibles se mejorarán con degradados y filtros de sombra..
Vea la demostración ahora para tener una idea clara de lo que estamos construyendo..
Como probablemente sabrá, los SVG en línea están dentro de los estándares emergentes de HTML5, por lo que el código que utilizamos en este tutorial no será totalmente compatible con todos los navegadores. Si bien los SVG en línea son compatibles teóricamente en todas las versiones actuales de los principales navegadores, las animaciones internas y los efectos interactivos que usaremos todavía no están tan bien soportados. El resultado final debería funcionar correctamente en las versiones actuales de Firefox, Chrome y Opera. Como siempre con las técnicas de HTML5, asegúrese de no confiar en estos efectos en los sitios en los que trabaja, e incluya alternativas cuando sea posible.
Vamos a profundizar, y comenzar por crear un perfil de página HTML5, así:
Una de las principales ventajas de usar SVG es su capacidad de ampliación. Para explotar esto, principalmente vamos a utilizar valores relativos para definir el contenido SVG. Agregue un elemento contenedor para el SVG en el cuerpo de la página:
Para ver cómo se ubica el SVG dentro del elemento que contiene, agregue lo siguiente a la sección de estilo en el encabezado de su página:
#picHolder background: #dedeff; borde: 1px sólido # 666666;
En el elemento contenedor en el cuerpo de su página, agregue el esquema del elemento SVG, de la siguiente manera:
Hemos establecido el ancho y el alto en 100%, ya que vamos a especificar el ancho del elemento contenedor. Sin embargo, en lugar de especificar explícitamente las dimensiones, usaremos una función de JavaScript para revelar con qué facilidad puede escalar el SVG hacia arriba y hacia abajo. Puede incluir un ancho y alto fijos en la etiqueta SVG de apertura o en la sección de estilo.
Las formas visibles en el gráfico se definirán dentro del elemento SVG. Antes de eso, trabajaremos en el defs sección. los defs sección es donde se colocan las definiciones a las que puede referirse más adelante al crear sus formas. Para este tutorial, el defs La sección contendrá definiciones para algunos rellenos de degradado y un par de sombras paralelas. Añade esta nueva sección dentro del elemento SVG:
Los elementos que colocamos en esta sección no aparecerán en realidad en la imagen, pero se utilizarán como rellenos y filtros para las formas que lo hacen. Incluiremos varios rellenos de gradiente; Así que vamos a trabajar a través de cada uno a su vez.
En primer lugar es un gradiente lineal:
Este degradado se especificará como el relleno para el área del rectángulo de fondo. los x1 y y1 los atributos representan los puntos de inicio del degradado dentro de la forma rellena, con el degradado desplegándose desde allí hasta el punto representado por x2 y y2. En este caso, el gradiente se ejecutará de arriba a abajo. Los elementos de parada representan puntos de color en el degradado. El primero indica que el 10% desde el inicio del gradiente será un color rojo oscuro sólido y la segunda parada que el 90% desde el final del gradiente será de color amarillo. Entre estos dos puntos, el degradado combinará los colores entre sí. Ambos colores tienen total opacidad..
A continuación vamos a agregar un gradiente para el propio registro. Este es un poco más complejo, es un degradado radial con varias paradas de color:
Un gradiente radial comienza desde el interior del círculo, con las partes más internas y externas del círculo definidas por cx, cy, fx y fy, enumerados junto al radio. En este caso, el gradiente radial ocupará la totalidad de la forma de registro circular. La mayor parte del registro será negro, con dos anillos de color ligeramente más claro que representan las secciones más suaves en el centro del registro y sus bordes. También colocaremos una etiqueta en el registro en su centro, por lo que el primer parche de color más claro en el registro aparecerá justo fuera de eso. A continuación, agregue el relleno degradado de la etiqueta:
Este es un degradado lineal simple que se utilizará como relleno para la etiqueta de registro circular. Sin embargo, observe que el ID de gradiente tiene un cero al final. Esto se debe al hecho de que vamos a agregar una función interactiva, que permite al usuario "cambiar el registro". Una función de JavaScript alternará entre un rango de rellenos de gradiente para el elemento de etiqueta. Para este propósito, agregue otro par de gradientes:
Cada uno de los gradientes tiene un ID que termina con un entero incremental, de modo que podemos iterarlos en JavaScript. Ahora, define otro degradado para crear un efecto de brillo en la parte superior del registro:
Esta vez, el degradado utiliza paradas de color opaco y alfa transparente; El efecto será un brillo sutil a través del registro. Finalmente, necesitamos un relleno metálico para el botón y el eje:
Esta vez, el degradado radial está ligeramente descentrado para crear una sensación de profundidad y luz, que se complementará con un filtro de sombra..
Antes de terminar con el defs En la sección, agregue un par de sombras para dar un poco más de profundidad a algunas de las formas:
Éste va a aparecer detrás del área de grabación. los X, y, anchura y altura las propiedades se refieren a la posición y las dimensiones dentro de la forma que usa este filtro. El desplazamiento define la sombra relativa a la forma original. El desenfoque evita que la forma de desplazamiento sea de color sólido, por lo que aparece como una sombra. En este caso, solo aparecerá la sombra, no la forma en sí; la sombra se definirá con una forma dedicada que se colocará detrás de la forma de registro. Para los controles de usuario, que son circulares y metálicos, también queremos una sombra paralela, pero también queremos que la forma se muestre:
Esta diferencia principal aquí, aparte de la escala de la sombra, es el elemento de mezcla, que conservará la forma original y también mostrará la sombra a su alrededor..
Eso es suficiente preparación; ¡Vamos a seguir con los gráficos! Cada elemento que agregue al cuerpo del SVG se mostrará en la parte superior de los elementos enumerados anteriormente, por lo que trabajaremos de abajo hacia arriba, comenzando con las formas en la parte posterior y terminando con las de la parte frontal..
Primero, agregue una forma de rectángulo para el fondo:
los rect Las dimensiones y la posición del elemento se especifican en relación con el SVG que contiene, que, si se recuerda, es relativo al tamaño del elemento que contiene. Vamos a configurar esto más tarde en JavaScript. Usaremos el tamaño relativo y los valores de posición siempre que sea posible, para que la imagen completa más la animación y la interacción puedan escalar hacia arriba o hacia abajo según se requiera. Observe que el relleno del elemento especifica uno de los gradientes que definimos, usando su atributo ID.
Lo siguiente desde la parte inferior es la sombra de registro, utilizando uno de los filtros de sombra que creamos:
La sombra estará detrás del registro, como una forma circular con un radio que es aproximadamente un tercio del espacio asignado a la imagen, ubicado en el centro. Como el filtro en este caso no aplica la fusión con la imagen, el círculo en sí no aparecerá, solo su sombra..
El siguiente es el propio registro:
Al igual que con la sombra, la cx y cy los atributos representan el centro del registro, que se centra en la imagen horizontal y verticalmente, con un radio de aproximadamente un tercio. Nuevamente, usamos uno de los gradientes que definimos, lo que haremos en cada forma..
Encima del registro está su etiqueta, así que agrégala a continuación:
El círculo de la etiqueta tiene el mismo punto central que el registro, a través del cual se extiende aproximadamente un tercio del camino. Comenzamos con la primera de las opciones de gradiente de etiquetas que definimos, e implementaremos el cambio de usuario entre estas más adelante. Incluimos un atributo de ID aquí para referirnos a este elemento en JavaScript..
Ahora, vamos a poner un poco de brillo en la parte superior del registro:
Cuando el registro gire, se moverá hacia la derecha y hacia abajo solo un poco, por lo que mantendremos el brillo ligeramente más pequeño que el registro para que no se propague más allá de él cuando se mueve. Este elemento también tiene un atributo de ID para detectar la interacción del usuario.
Para completar, agreguemos un poco de eje en el centro del registro:
Esta forma utiliza el gradiente metálico que creamos. También aplicamos el segundo filtro de sombra paralela, que incluye la fusión para que aparezcan la forma y la sombra..
Por último, pero no menos importante, necesitamos un pequeño botón para que los usuarios controlen el cambio del registro, utilizando el mismo relleno y filtro que el husillo:
Esta vez, en lugar de un elemento de cierre automático, separamos las etiquetas de círculo de apertura y cierre. Esto se debe a que vamos a animar el botón cuando los usuarios lo presionen e incluirán el efecto de animación entre estas etiquetas. Tenga en cuenta que hemos podido reutilizar elementos de relleno y filtro de la defs sección. Esta es la apariencia inicial del gráfico una vez que las dimensiones de la página están en su lugar:
Cada elemento que agregue al cuerpo del SVG se mostrará sobre los elementos listados anteriormente.
Ahora que tenemos nuestros elementos visuales en su lugar, vamos a agregar algunas animaciones. Podemos realizar el giro de grabación utilizando transformaciones de animación SVG, que son una extensión de la animación SMIL. Estos efectos animados se definen dentro del marcado SVG. Un efecto se aplica a cualquier elemento SVG en el que aparezca. Puede usar transformaciones CSS3 en elementos SVG, pero las alternativas basadas en SMIL le brindan un mayor nivel de control.
Vamos a incluir dos animaciones simples: el registro girará y el botón se moverá un poco cuando el usuario haga clic en él. Empecemos con la animación un poco más directa para el botón..
Dentro del elemento de forma de botón, entre las etiquetas de círculo de apertura y cierre que creamos, agregue la transformación animada de la siguiente manera:
los animateTransform se aplica a un atributo XML dentro del elemento en el que aparece. En este caso, es una transformación de traducción. los desde y a los atributos representan las posiciones inicial y final del elemento; son relativas a su posición inicial, por lo que el botón se moverá hacia la derecha y hacia abajo con un solo píxel. La transformación comenzará cuando un usuario haga clic, transcurrirá más de una décima de segundo y se ejecutará una vez. El botón volverá a su posición original cuando se complete la animación.. Sugerencia: para mantener un elemento en la posición final después de una animación, especifique relleno = "congelar".
Ahora para hacer girar el disco. Un animateTransform se aplica a un elemento SVG, pero necesitamos que el giro se aplique a más de un elemento, específicamente al registro y la etiqueta (no al brillo ni a la sombra). En lugar de crear animaciones separadas para cada uno y ejecutarlas al mismo tiempo, podemos usar una sola transformación agrupando estos elementos. Antes del elemento del círculo que representa el registro (con "recordGrad" como su relleno) agregue una etiqueta de grupo de apertura:
Después del círculo que representa la etiqueta, cierre el grupo:
Ahora agregue la transformación antes de esta etiqueta de grupo de cierre para que se aplique a todo el grupo:
Esta vez, el efecto animado es una transformada de rotación. El elemento girará 360 grados y, para aumentar el efecto, se moverá hacia la derecha y hacia abajo en un solo píxel en cada rotación, durante un período de un segundo, repitiendo indefinidamente. Esta transformación también incluirá un desde atributo, ya que es necesario especificar la posición inicial de los elementos que se rotan. Si no especifica esta posición, los elementos giran alrededor de 0, 0 punto por defecto. Sin embargo, en este momento, no puede proporcionar valores relativos (es decir, porcentaje) a estos atributos, solo valores fijos. Por esta razón, vamos a establecer el desde atributo cuando especificamos las dimensiones SVG en JavaScript.
Ahora implementemos nuestras funciones interactivas: haciendo clic en el botón para cambiar el registro y presionando el registro para ralentizarlo.
Primero, en la sección de script de su encabezado de página, agregue estas variables para contar y hacer un seguimiento de los diseños de etiquetas:
// realizar un seguimiento de la etiqueta de registro actual var currLabel = 0; // alterar esto para un número diferente de etiquetas var numLabels = 3;
Ahora, dentro de la etiqueta de apertura para el elemento de círculo que representa el botón (que ahora tiene una animación entre sus etiquetas), agregue el siguiente detector de eventos de clic:
onclick = "changeRecord ()"
De vuelta en la sección de guión principal, agregue el esquema de la función:
función changeRecord ()
Cada vez que el usuario presiona el botón, nos moveremos a la siguiente etiqueta, volviendo a la primera cuando alcancemos la última:
Accentsconagua
// mover a la siguiente etiqueta currLabel ++; // restablecer si está en el número más alto if (currLabel> numLabels - 1) currLabel = 0; // establezca el atributo de relleno al siguiente gradiente document.getElementById ("recordLabel"). setAttribute ("fill", "url (#labelGrad" + currLabel + ")"); La última línea aquí muestra cómo puede interactuar con los elementos SVG utilizando técnicas DOM, como lo haría con otros elementos de la página web. Aquí, ponemos la llenar atributo del elemento de círculo de etiqueta para utilizar el siguiente relleno de degradado, especificando el ID de relleno.
Ahora agregue los siguientes atributos de evento al elemento de brillo de registro (con "shineGrad" como su relleno), ya que vamos a usar los eventos del mouse hacia arriba y hacia abajo para desencadenar la ralentización del registro y volver a acelerarlo:
onmousedown = "onRecord ()" onmouseup = "offRecord ()"
De vuelta en la sección de script, agregue la función para cuando un usuario esté presionando el registro:
// función llamada cuando el usuario está presionando la función de grabación en Registrar ()
Dentro de esta función, podemos reducir la velocidad de grabación de la animación al modificar el animateTransform atributo de duración. También alteramos la opacidad del brillo para crear la impresión de presionar hacia abajo:
// ralentiza la duración de la animación document.getElementById ("spinTrans"). setAttribute ("dur", "5s"); // disminuir la opacidad del brillo document.getElementById ("shine"). style.opacity = "0.7"; Cuando el usuario libera el registro, queremos que vuelva a su velocidad y apariencia normales, así que agregue la función "mouse up" a continuación:
// función llamada cuando el usuario libera la función de registro offRecord () // restablecer a velocidad normal document.getElementById ("spinTrans"). setAttribute ("dur", "1s"); // vuelve a establecer la opacidad en document.getElementById normal ("shine"). style.opacity = "1.0"; Por fin podemos establecer el tamaño total del SVG ahora. En la parte superior de la sección del script, agregue una nueva variable:
// tamaño deseado de SVG var tamaño = 300;
Vamos a utilizar inicialmente 300 Píxeles tanto para el ancho como para la altura del gráfico, pero puede modificarlo en cualquier momento. Defina una función en la sección de script para establecer estas dimensiones:
// función para establecer las dimensiones de SVG función setSize () // establecer css y transformar el tamaño var holder = document.getElementById ("picHolder"); holder.style.height = tamaño + "px"; holder.style.width = tamaño + "px"; document.getElementById ("spinTrans"). setAttribute ("from", "0," + size / 2 + "," + size / 2 + ""); Establecemos el tamaño en el contenedor. div elemento. Tómese un momento para ver la línea final en esta función. Dado que la animación de transformación de rotación no puede usar valores porcentuales relativos, debemos establecer el desde elemento que utiliza la variable de tamaño (dividido por dos para el punto central del registro). Con 300 como tamaño SVG, así es como aparecería la transformación con valores fijos:
Si desea utilizar valores fijos en su SVG, puede hacerlo. Solo estamos usando esta técnica para demostrar el uso de dimensiones relativas. Finalmente, llame a esta función al final de la sección del script:
window.addEventListener ("DOMContentLoaded", setSize, false); ¡Nuestra animación SVG interactiva ya está completa! Abra su página en un navegador compatible para ver el efecto; No te olvides de intentar interactuar con el registro y el botón. Intente alterar la variable de tamaño para ver cómo se adaptan todos los elementos SVG a la medida, incluidas las animaciones e interacciones..
Si desea explorar SVG más a fondo, algunos temas a considerar incluyen rutas, texto, enmascaramiento y recorte. También hay una serie de opciones de animación adicionales a considerar. Por supuesto, estos efectos no funcionarán para todos los usuarios en este momento, pero esperamos que algún día pronto ...
