HTML

El patrón SVG (Scalable Vector Graphic) es un elemento que define el patrón en gráficos usando HTML. Para trabajar con la creación de un patrón SVG, debe definir un <patrón> dentro de un SVG, después de eso, puede definir las formas dentro de ese <patrón>. Ahora tiene que definir el área de formas especificando su color, bordes, etc. Sintaxis de Declaración:

<pattern id=" any name defined by user" 
         x="x-axis co-ordinate" 
         y="y-axis co-ordinate"
         width="length" 
         height="length" 
         viewBox= " "
         view port= " "
         patternUnits=" " 
         patternContentUnits=" " 
         patternTransform=" " 
         preserveAspectRatio=" " 
         xlink:href=" ">
<pattern>

Atributos:

x: coordenada del eje x del cuadro delimitador del patrón. El valor predeterminado es 0
y: coordenada del eje y del cuadro delimitador del patrón. El valor predeterminado es 0.
ancho: ancho del cuadro delimitador del patrón. El valor predeterminado es 0.
altura: Altura del cuadro delimitador del patrón. El valor predeterminado es 0.
viewBox: Define el sistema de coordenadas del cuadro patrón que puede hacer zoom en el patrón.
puerto de vista: Da la imagen de una parte particular.
patternUnits: Define el sistema de coordenadas de x, y, alto y ancho. El valor predeterminado es ObjectBoundingBox.
patterncontentUnits: Define el contenido dentro. El valor predeterminado es userSpaceOnuse.
patternTransform: Define la transformación del sistema de patrón inicial al de destino.
preserveAspectRatio: escala el gráfico deformado o modificado debido a la diferencia en el cuadro de visualización y el puerto de visualización.
xlink:href: Enlaza los patrones como referencia.

Nota: Esta parte básicamente no tiene relevancia directa con el tema principal. En su lugar, le presenta estos conceptos, ya que puede encontrarlos mientras revisa algunos ejemplos avanzados. Dado que aumentan los efectos visuales de los patrones, es por eso que se refieren a su uso. Los siguientes ejemplos ilustran el patrón HTML SVG: Ejemplo 1: aquí diseñaremos un logotipo utilizando el patrón SVG.

<!DOCTYPE html>
<html>
 
<body>
    <center>
 
        <svg height="200" width="400">
            <defs>
                <linearGradient id="grad1"
                                x1="0%"
                                y1="0%"
                                x2="100%"
                                y2="0%">
                    <stop offset="0%"
                          style="stop-color:white;stop-opacity:1" />
                    <stop offset="100%"
                          style="stop-color:green;stop-opacity:1" />
                </linearGradient>
            </defs>
            <ellipse cx="200" cy="100" rx="120"
                     ry="80" fill="url(#grad1)" />
            <text fill="#000000" font-size="22"
                  font-family="ARIAL" x="120" y="110">
              GeeksforGeeks
            </text>
        </svg>
    </center>
</body>
 
</html>

Salida: Ejemplo 2:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Pattern of SVF</title>
  </head>
  <body>
    <center>
      <h1 style="color:green;">GeeksfoGeeks</h1>
    </center>
    <svg width="100%" height="100%">
        <defs>
            <pattern id="square"
                     x="0"
                     y="0"
                     width="100"
                     height="100"
                     patternUnits="userSpaceOnUse">
 
                <rect fill="Purple"
                      width="100"
                      height="100"
                      x="50"
                      y="50">
                </rect>
 
            </pattern>
        </defs>
 
        <rect x="0" y="0" width="100%"
              height="100%" fill="url(#square)">
             
        </rect>
    </svg>
  </body>
</html>

Salida: Ejemplo 3: puede definir rutas en el SVG definir ruta hay algunas cosas sobre saber ruta definir el movimiento de la array de líneas, ordenadamente, los siguientes comandos están disponibles para datos de ruta:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto 
C = curveto 
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto

html

<!DOCTYPE html>
<html>
<title>SVG Pattern</title>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Sample SVG Pattern</h3>
    <svg width="800" height="800">
 
        <defs>
            <pattern id="pattern1" patternUnits="userSpaceOnUse"
                     x="0" y="0" width="100"
                     height="100"
                     viewBox="0 0 4 4">
                <path d="M 1 1 L 2 1 L 3 1 L 3 3 L 2 3 L 1 3 Z"
                      fill="red"
                      stroke="black" />
            </pattern>
        </defs>
 
        <g>
            <rect x="0" y="0"
                  width="100%"
                  height="100%"
                  fill="url(#pattern1)" />
        </g>
 
    </svg>
 
</body>

Salida: navegadores compatibles: los navegadores compatibles con HTML SVG Pattern se enumeran a continuación:

Google Chrome
explorador de Internet
Firefox
Safari
Ópera

Publicación traducida automáticamente

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

html

html

html

Deja una respuesta Cancelar la respuesta