CSS | propiedad de relleno – Part 1

La propiedad de relleno es un atributo de presentación que se utiliza para establecer el color de una forma SVG.

Sintaxis:

fill: <paint>

Valores de propiedad:

pintura: Se utiliza para establecer el color de la propiedad de relleno. Esta pintura se puede definir usando nombres de color, valores hexadecimales, rgb o hsl. El valor predeterminado es negro. También se puede usar con patrones usando la función url().

Ejemplo 1: Este ejemplo ilustra los diferentes valores de color de la propiedad de relleno.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | fill Property
  </title>
  <style>
    .opacity1 {
      /* using color names */
      fill: green;
    }
  
    .opacity2 {
      /* using hex values */
      fill: #ff0000;
    }
  
    .opacity3 {
      /* using rgb values */
      fill: rgb(0, 0, 128);
    }
  
    .opacity4 {
      /* using hsl values */
      fill: hsl(24, 100%, 60%);
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>CSS | fill</b>
  <div class="container">
    <svg height="250px" width="600px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <circle class="opacity1" cx="100"
        cy="100" r="50" />
      <circle class="opacity2" cx="250"
        cy="100" r="50" />
      <circle class="opacity3" cx="400"
        cy="100" r="50" />
      <circle class="opacity4" cx="550"
        cy="100" r="50" />
    </svg>
  </div>
</body>
</html>

Producción:
color de relleno

Ejemplo 2: este ejemplo utiliza patrones para la propiedad de relleno.

<!DOCTYPE html>
<html>
<head>
  <title>
    CSS | fill property
  </title>
  <style>
    .opacity1 {
      fill: url(#pattern1);
    }
  
    .opacity2 {
      fill: url(#pattern2);
    }
  </style>
</head>
<body>
  <h1 style="color: green">
    GeeksforGeeks
  </h1>
  <b>
    CSS | fill
  </b>
  <div class="container">
    <svg height="250px" width="600px"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1">
      <defs>
        <pattern id="pattern1"
          viewBox="0, 0, 10, 10"
          width="10%" height="10%">
          <circle r="10" />
        </pattern>
        <pattern id="pattern2" 
          viewBox="0, 0, 10, 10"
          width="10%" height="10%">
          <rect height="5" width="5"
            fill="green" />
        </pattern>
      </defs>
  
      <circle class="opacity1" cx="100"
        cy="100" r="50" />
      <circle class="opacity2" cx="250"
        cy="100" r="50" />
    </svg>
  </div>
</body>
</html>

Producción:
patrón de relleno

Navegadores compatibles: los navegadores compatibles con la propiedad de relleno se enumeran a continuación:

Cromo
Firefox
Safari
Ópera
explorador de Internet 9

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta