Tenemos la etiqueta <canvas> para dibujar gráficos, en este caso <canvas> solo crea un lienzo para dibujar dentro de ella de manera similar que <svg>, pero la diferencia está en que el dibujo lo haremos mediante un script de JavaScript. Etiqueta <canvas> La etiqueta <canvas> puede ser usado como cualquier otro elemento de HTML, creará un linezo en blanco para… Leer más »31-Canvas en HTML5.
Ahora es posible crear trazos en HTM5 dentro de <svg>, se trata de crear segmentos de linea, entre rectas y curvas para conseguir un gráfico y lo haremos mediante la etiqueta <path>. Etiqueta <path> La etiqueta <path> nos permite crear un trazo en la pantalla dentro de un lienzo SVG, nos da libertad para crear cualquier forma geométrica haciendo uso… Leer más »30-Trazos en html5.
Podemos crear animaciones de elementos SVG en HTML5, las animaciones se ejecutan en un tiempo y pueden cambiar alguna propiedad del elemento en cuestión. Etiqueta <animate> La etiqueta <animate> contiene la animación propiamente dicha, mediante atributos podemos establecer las características de la animación. Por otro lado la etiqueta <animate> irá dentro del elemento SVG que deseamos animar. Por ejemplo, si… Leer más »29-Animaciones SVG
Podemos crear gran variedad de textos vistosos utilizando SVG. De forma similar a las formas geométricas podemos definir gran variedad de propiedades, ademas al tratarse de texto ahora es posible aplicar estilos como el tipo de letra, tamaño, variación, peso, etc. Veamos cómo se hacerlo. Etiqueta text Para crear texto en formato SVG, simplemente agregamos la etiqueta <text> dentro del… Leer más »28-Texto SVG
Crear elipses SVG con código HTML, es tan simple como emplear la etiqueta y mediante atributos establecer el aspecto que deseamos conseguir. La elipse Una elipse es una figura geométrica curva y cerrada, con dos ejes perpendiculares, posee un centro y un eje menor (ry) y eje mayor (rx) según sea el caso, en esta lección nos enfocaremos a crear… Leer más »27-Elipse SVG
Crear un círculo en SVG con HTML5, es más fácil de lo que piensas, solamente tenemos que definir la posición del centro de dicho círculo y el radio que deseamos, además de ello aplicaremos las propiedades para definir su apariencia. Veamos cómo hacerlo. Etiqueta circle Para dibujar un circulo SVG, simplemente creamos la etiqueta dentro de la etiqueta SVG, de… Leer más »26-Círculos SVG
Ahora con HTML5 es posible crear formas de polígonos en SVG, figuras geométricas que encierran una región superficial como puede ser: triángulos, cuadriláteros, pentágonos, hexágonos, etc. En esta lección aprenderemos a cómo crearlos. Etiqueta <polygon> La etiqueta de HTML5 nos permite crear una figura cerrada mediante varios lados y vértices en conjunto, simplemente creamos la etiqueta dentro del elemento y… Leer más »25-Polígonos SVG.
Crear un rectángulo con HTML es más sencillo de lo que crees, en esta lección te enseñaré a cómo crear rectángulos en SVG y cómo personalizarlos, además veremos varios ejemplos muy específicos para las propiedades respectivas. Vamos a por ello. Etiqueta <rect> Para crear un rectángulo en SVG simplemente creamos la etiqueta dentro del elemento , de tal manera que… Leer más »24-Rectángulos SVG.
Crear polilíneas con código HTML ahora es posible gracias al elemento SVG, es bastante sencillo, solo necesitaremos crear el elemento polilínea dentro de SVG e indicar los puntos de inflexión de la polilínea, a ello le sumamos el aspecto que debe tener y listo. Ahora que ya tienes idea, pues entonces veamos con ejemplos concretos. A diferencia de una línea,… Leer más »23-Polilíneas SVG.
Crear líneas rectas con código HTML en formato SVG es muy sencillo, basta con definir el punto inicial y el punto final de la línea, a ello le sumamos las propiedades para determinar aspectos como color, ancho y entre otras, veamos de primera mano, cómo es que se hace. Etiqueta <line> Para crear una línea recta dentro de SVG crearemos… Leer más »22-Líneas SVG.