Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

SVG en HTML5

SVG: dibujos y gráficos mediante vectores escalables.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

SVG (V)

Relleno de figuras

Introducción

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.

Transparencias

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; }

Tipo de relleno

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.

Esquina entre dos líneas

La propiedad linejoin permite dar un tratamiento diferenciado a la esquina en donde se juntan dos líneas. Esta propiedad tiene los siguientes valores:

• "mitter" : Es el valor por defecto y la esquina se muestra como tal como está: sin recortar sus aristas.
• "round" : Recorta la esquina dejándola redondeada.
• "bevel" : Recorta la esquina mediante una línea recta, dejándola como un chaflán.

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

Gradiente de color

Página creada por ANYELGUTI.

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