w3.unpo<code>todo

Color de relleno

En el SVG podemos definir el relleno de un trazado con fill. A continuación algunos atributos que como fill controlan el aspecto del relleno.

La propiedad fill

Podemos utilizar fill como valor del atributo style.

<rect x="10" y="15" height="100" width="110" style="fill: #6ab150"/>

o podemos utilizar fill como atributo de un objeto SVG

<rect x="130" y="15" height="100" width="110" fill="#6ab150"/>

El valor del atributo fill puede ser un color, un patrón o un degradado. Si el valor del atributo fill es un color podemos utilizar:
colores HEX o hexadecimales ( #6ab150 )
colores RGB ( rgb(106, 177, 80) )
colores HSL ( hsl(104, 38%, 50%) )
nombres de colores predefinidos ( LimeGreen )

Colores alpha

También podemos utilizar colores RGBA, o sea colores RGB con un canal alpha  y colores HSLA ( colores HSL con un canal alpha )
colores RGBA ( rgb(106, 177, 80, .5) )
colores HSLA ( hsl(104, 38%, 50%, .5) )

Opacidad

Los colores HSLA y RGBA no son la única manera de afectar la opacidad / transparencia de un relleno. El atributo opacity puede ser utilizado con este propósito, y toma valores entre 0 - totalmente transparente - y 1 - totalmente opaco.
También existe el atributo fill-opacity que afecta de la misma manera solo a los rellenos, y stroke-opacity que afecta solo a los bordes y líneas en SVG.

Una regla de llenado ( fill-rule )

El SVG determina si un punto se encuentra dentro o fuera del trazado. Obviamente si el punto se encuentra dentro del trazado, se tiñe del color especificado ( fill="#6ab150" ), de lo contrario se queda en blanco. Parece sencillo pero no lo es. A veces no es tan claro si un punto se encuentra dentro o fuera del trazado, por ejemplo cuando dibujamos estrellas y las líneas del trazado se entrecruzan. Para dejar las cosas claras podemos utilizar la propiedad fill-rule que puede tomar una de estas dos valores: evenodd ( par impar ) o nonzero.