SVG <patrón> Elemento – Barcelona Geeks

SVG significa Gráfico vectorial escalable. Se puede usar para hacer gráficos y animaciones en lienzo HTML. El elemento <patrón> se utiliza para rellenar formas con patrones formados por imágenes. Rellena las formas en forma de mosaico.

Sintaxis:

<pattern> . . .  </pattern>

Atributos:

patternUnits: Define las coordenadas de x, y, alto y ancho.
patternContentUnits: Define la región del patrón.
preserveAspectRatio: muestra un elemento con un viewBox que proporciona una relación de aspecto que debe caber en una ventana gráfica con una relación de aspecto diferente.
xlink:href: Define un IRI de referencia a un recurso.

Ejemplo 1:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="200" height="200">
        <defs>
            <pattern id="pattern" x="0" y="0"
                width="10" height="10" 
                patternUnits="userSpaceOnUse">
              
                <circle cx="10" cy="10" r="10"
                    style="stroke:lightgreen; 
                        fill:white" />
            </pattern>
        </defs>
  
        <rect x="10" y="10" width="100" 
            height="100" style="stroke: #000000;
                        fill: url(#pattern);" />
  
        <g fill="#FFFFFF" stroke="black" 
            font-size="12" font-family="Verdana">
          
        <text x="13" y="65">
            GeeksForGeeks
        </text>
    </svg>
</body>
  
</html>

Producción:

Ejemplo 2:

HTML

<!DOCTYPE html>
<html>
  
<body>
    <svg width="300" height="350">
        <defs>
            <pattern id="in" x="2" y="2" 
                width="6" height="6" 
                patternUnits="userSpaceOnUse">
  
                <rect x="2" y="2" width="4" 
                    height="8" stroke="green" 
                    fill="red" />
            </pattern>
  
            <pattern id="out" x="13" y="13" 
                width="50" height="50" 
                patternUnits="userSpaceOnUse">
  
                <circle cx="4" cy="4" r="18" 
                    stroke="black" 
                    stroke-width="4px" 
                    fill="url(#in)" />
            </pattern>
        </defs>
  
        <rect x="1" y="5" width="200" 
            height="200" stroke="green" 
            fill="url(#out)" />
    </svg>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta