Atributo de relleno SVG

El relleno de la forma SVG define el color de la forma dentro del contorno. En otras palabras, la superficie de la forma SVG. El relleno es uno de los atributos SVG CSS básicos que puede configurar para cualquier forma SVG.

Ejemplo de relleno

El relleno de las formas SVG es el relleno dentro del contorno de la forma. Este es un ejemplo de relleno de SVG:

<svg width="500" alt="100"><círculo cx="50"　cy="50"　r="25"
　　　　　　　　style="borde: none; relleno: #0000ff;"　/></svg>

Este ejemplo define un círculo con color de relleno azul (#0000ff) sin color de trazo. A continuación, se muestra la imagen generada:

Ejemplo de relleno y trazo

Puede combinar colores de trazo y relleno de SVG para formar formas SVG. Este es un ejemplo de trazo y relleno de SVG:

<svg width="500" alt="100"><círculo cx="50"　cy="50"　r="25"
　　　　　　　　style="borde: #000066; relleno: #3333ff;　/></svg>

Este ejemplo utiliza azul más oscuro (#000066Color de relleno y azul más claro (#3333ff) define el color de relleno del círculo. A continuación, se muestra la imagen generada:}

relleno-opacidad

propiedad CSS de SVG fill-opacidad se utiliza para establecer la opacidad del color de relleno de la forma. fill-opacidad se utiliza entre 0 y1entre los valores. Cuanto más se acerque a 0, más transparente será el relleno. Cuanto más se acerque a1，el relleno es más opaco. El valor predeterminado fill-El valor de opacidad es1，lo que significa que el color de relleno es completamente opaco.

Este es un ejemplo de transparencia de relleno SVG fill-ejemplo de opacidad, que contiene dos con diferentes (fill-opacity) del círculo:

<svg width="500" alt="120">
<text　x="22"　y="40">Texto detrás de la forma</text>
<circle　cx="50"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　relleno-opacity:　0.3;　　"></path>
<circle　cx="120"　cy="50"　r="25"
　　　　　　　　style="stroke:　none;　fill:　#0000ff;
　　　　　　　　　　　　　　　relleno-opacity:　0.7;　　"></path>
</svg>

Esta es la imagen generada.

Tenga en cuenta que el texto detrás del círculo derecho es más invisible que el texto detrás del círculo izquierdo. Eso se debe a que el right circle fill-La opacidad es mayor que la del círculo de la izquierda.

relleno-rule

relleno-rule determina la forma de relleno de la forma compleja. fill-rule puede tomar dos valores diferentes　. Estos valores son:

• nonzero

• evenodd

Por lo general, estos dos valores son las reglas para determinar la forma interna y externa de la forma. Solo relleno interno, para una circunferencia, es simple, pero para formas más complejas, no es tan fácil. Vea este ejemplo de <path>:

<svg width="500" alt="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　　　　estilo="trazo: "#000000;
　　　　　　　　　relleno: "#6666ff;
　　　　　　　　　relleno-rule:　nonzero;
　　　　　　></path>
<path d="M150,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　　　　estilo="trazo: "#000000;
　　　　　　　　　relleno: "#6666ff;
　　　　　　　　　relleno-rule:　nonzero;"></path>
</svg>

Estos dos ejemplos de rutas tienen8líneas, cada una dibujada con un diamante, donde el diamante más grande contiene al más pequeño. En la ruta de la izquierda, el diamante interno se dibuja de izquierda a derecha (en el sentido de las agujas del reloj). En la ruta de la derecha, el diamante interno se dibuja de derecha a izquierda (en el sentido contrario a las agujas del reloj). Esto se hace utilizando fill-rule：non-El resultado de dibujar con zero

Como puede ver, la regla nonzero determina la dirección y la forma del diamante interno del dibujo interno y la forma del diamante interno. La regla nonzero que determina si un punto está dentro o fuera de la forma es:

Dibuje una línea (rayo) desde el punto a infinito en cualquier dirección. Cada vez que la ruta en la forma atraviese este rayo, si la ruta atravesó el rayo de izquierda a derecha, se añadirá1Añádase al contador; si la ruta atravesó el rayo de derecha a izquierda, se restará del contador1Después de calcular todas las rutas que atraviesan la línea de rayo, si el recuento total es cero, ese punto se considera fuera de la ruta. Si el recuento total no es cero, el punto se considera dentro de la ruta.

Esta es una muestra de la misma ruta, utilizando fill-rule：evenodd

<svg width="500" alt="120">
<path d="M50,20 l40,40 l-40,40 l-40,-40 l40,-40
　　　　　　　　　M50,40 l20,20 l-20,20 l-20,-20 l20,-20"
　　　　　　estilo="trazo: "#000000;
　　　　　　relleno: "#6666ff;
　　　　　　relleno-rule: "evenodd";"/path>
<path d="M150,20 l-40,40 l40,40 l40,-40 l-40,-40
　　　　　　　　　M150,40 l-20,20 l20,20 l20,-20 l-20,-20"
　　　　　　estilo="trazo: "#000000;
　　　　　　relleno: "#6666ff;
　　　　　　relleno-rule: "evenodd";"/path>
</svg>

Efecto de la imagen después de ejecutar:

El término 'evenodd' literalmente significa 'impar/par'. Según esta regla, para determinar si un punto está dentro de una forma, desde ese punto se dibuja una línea recta en cualquier dirección y se detecta el número de intersecciones de la línea con la trayectoria de la forma. Dibujar una línea recta (rayo) desde el punto hacia el infinito en cualquier dirección. Cada vez que la trayectoria cruza la línea, se aumenta un contador. Si el total es par, el punto está fuera. Si el recuento total es impar, el punto está dentro de la forma.