SVG: dibujos y gráficos mediante vectores escalables.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 40
Visitas el mes pasado: 86
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
En Páginas anteriores de este manual hemos visto la propiedad fill que rellena una figura con un color plano. No es la única opción para el relleno de una figura. Veremos aquí otras propiedades relacionadas con el relleno de figuras y con el tratamiento del borde de las mismas.
La propiedad opacity permite dar transparencia a una figura. Esta propiedad podemos ponerla tanto como un atributo de html-svg, o como propiedad CSS y su valor es un número decimal entre el 0 (transparencia máxima) y el 1 (opacidad máxima). Como atributo lo escribimos así:
<circle cx=70 cy=70 r=60 stroke="yellow" stroke-width=5 fill="blue" opacity=0.5 />
Como propiedad CSS, lo escribiremos igual que la propiedad opacity de CSS3:
<circle cx=70 cy=70 r=60 style="stroke: yellow; stroke-width: 5px; fill: blue; opacity: 0.5" />
Hemos puesto aquí un ejemplo de un circulo semitransparente. Cualquiera de los dos códigos nos es válido.
La propiedad afecta a la figura entera, es decir, tanto el borde (stroke) como el relleno (fill) se vuelven transparentes en el grado que indica el valor de la propiedad.
En la figura de la derecha vemos cuatro círculos semitransparentes. El código que hemos utilizado para este gráfico SVG es el de cuatro círculos muy parecidos al del código de ejemplo, y es el siguiente:
<svg width=270 height=270> <circle cx=70 cy=70 r=60 stroke="yellow" stroke-width=5 fill="blue" opacity=0.5 /> <circle cx=110 cy=110 r=60 stroke="green" stroke-width=5 fill="red" opacity=0.5 /> <circle cx=150 cy=150 r=60 stroke="blue" stroke-width=5 fill="yellow" opacity=0.5 /> <circle cx=190 cy=190 r=60 stroke="red" stroke-width=5 fill="green" opacity=0.5 /> </svg>
Podemos aplicar la transparencia sólo al relleno(fill) o sólo al borde (stroke) o aplicar transparencias distantas a cada uno de ellos.
La propiedad fill-opacity aplica la transparencia sólo al relleno(fill).
La propiedad stroke-opacity aplica la transparencia sólo al borde (stroke).
Ambas propiedades pueden escribirse como un atributo del elemento HTML-SVG o como una propiedad CSS aplicada al elemento. Sus valores son los mismos que para opacity, es decir un número decimal que va desde 0 (transparencia total) a 1 (opacidad total).
En el gráfico de la derecha hemos puesto cuatro cuadrados con transparencia total en el relleno y transparencia con valor 0.7 para el borde. Hemos separado los códigos HTML y CSS los cuales son los siguientes.
Código HTML del gráfico:
<svg width=270 height=270> <rect x=10 y=10 width=110 height=110 id="r1" /> <rect x=50 y=50 width=110 height=110 id="r2" /> <rect x=90 y=90 width=110 height=110 id="r3" /> <rect x=130 y=130 width=110 height=110 id="r4" /> </svg>
Código CSS del gráfico:
#r1, #r2, #r3, #r4 { stroke-width:15px; fill-opacity: 0; stroke-opacity: 0.7; } #r1 { stroke: green; } #r2 { stroke: red; } #r3 { stroke: yellow; } #r4 { stroke: blue; }
La propiedad fill-rule Permite elegir si el relleno se hará de forma total o parcial en figuras complejas que tienen varios compartimentos. Sus posibles valores son non-zero y evenodd.
En las figuras de la derecha, si nos fijamos en las dos de arriba, la de la izquierda tiene el atributo fill-rule="non-zero", lo que hace que se rellene la figura entera. La figura de la derecha tiene el atributo fill-rule="evernodd", lo que hace que sólo se rellenen los compartimentos exteriores, dejando el central sin rellenar.
Esta propiedad, al igual que las anteriores, puede escribirse como atributo del elemento o como propiedad CSS.
La propiedad linejoin permite dar un tratamiento diferenciado a la esquina en donde se juntan dos líneas. Esta propiedad tiene los siguientes valores:
En el gráfico anterior vemos en las dos estrellas de la parte de abajo los efectos de esta propiedad. La estrella de la izquierda tiene el atributo linejoin="round" y muestra sus esquinas redondeadas, mientras que la estrella de la derecha tiene el atributo linejoin="bevel" y muestra sus esquinas recortadas en línea recta.
Al igual que las anteriores, esta propiedad puede escribirse tanto como un atributo del elemento como en el código CSS.
El gráfico anterior muestra tanto esta propiedad como la propiedad fil-rule vista anteriormente. Su código es el siguiente.
<svg width=270 height=270> <path id="p1" d="M 70 10 l -40 120 l 90 -70 l -110 0 l 90 70 z" stroke="blue" fill="yellow" stroke-width="3" fill-rule="non-zero"/> <path id="p2" d="M 200 10 l -40 120 l 90 -70 l -110 0 l 90 70 z" stroke="blue" fill="yellow" stroke-width="3" fill-rule="evenodd"/> <path d="M 70 140 l -40 120 l 90 -70 l -110 0 l 90 70 z" stroke="blue" fill="yellow" stroke-width="8" stroke-linejoin="round"/> <path d="M 200 140 l -40 120 l 90 -70 l -110 0 l 90 70 z" stroke="blue" fill="yellow" stroke-width="8" stroke-linejoin="bevel" /> </svg>
Fíjate cómo en el código repetimos la misma figura al poner la misma ruta, en la que sólo cambia el punto de inicio. El resto de comandos están escritos de forma relativa, (en minúsculas), lo que permite referirse siempre al primer punto.
En las dos estrellas de abajo aumentamos el tamaño del borde (stroke-width="8") para apreciar mejor el efecto de la propiedad linejoin.
En la siguiente página veremos el Gradiente de color en el color de los elementos SVG
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com