SVG - Patrones

SVG usa el elemento <pattern> para definir patrones. Los patrones se definen utilizando el elemento <pattern> y se utilizan para rellenar elementos gráficos en mosaico.

Declaración

A continuación se muestra la declaración de sintaxis de <pattern>elemento. Solo mostramos los atributos principales.

<pattern
   patternUnits="units to define x,y, width and height attributes."
   patternContentUnits ="units to define co-ordinate system of contents of pattern"
   patternTransform = "definition of an additional transformation from the pattern coordinate system onto the target coordinate system"
   
   x="x-axis co-ordinate" 
   y="y-axis co-ordinate"     
   
   width="length"
   height="length"
   
   preserveAspectRatio="to preserve width/height ratio of original content"
   xlink:href="reference to another pattern" >
</pattern>

Atributos

No Señor.	Nombre y descripción
1	patternUnits- unidades para definir patrones de efecto región. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del patrón y para los atributos que definen la subregión del patrón. Si patternUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'patrón'. Si patternUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'patrón'. El valor predeterminado es userSpaceOnUse.
2	patternContentUnits- unidades para definir la región de contenido del patrón. Especifica el sistema de coordenadas para los diversos valores de longitud dentro del patrón y para los atributos que definen la subregión del patrón. Si patternContentUnits = "userSpaceOnUse", los valores representan valores en el sistema de coordenadas del usuario actual en su lugar en el momento en que se usa el elemento 'patrón'. Si patternContentUnits = "objectBoundingBox", los valores representan valores en fracciones o porcentajes del cuadro delimitador en el elemento de referencia en su lugar en el momento en que se utiliza el elemento 'patrón'. El valor predeterminado es userSpaceOnUse.
3	x- Coordenada del eje x del cuadro delimitador del patrón. Defeault es 0.
4	y- Coordenada del eje Y del cuadro delimitador del patrón. El valor predeterminado es 0.
5	width- ancho del cuadro delimitador del patrón. El valor predeterminado es 0.
6	height- altura del cuadro delimitador del patrón. El valor predeterminado es 0.
7	preserveAspectRatio - preservar la relación ancho / alto del contenido original.
8	xlink:href - utilizado para referirse a otro patrón.

Ejemplo

testSVG.htm

<html>
   <title>SVG Pattern</title>
   <body>
      <h1>Sample SVG Pattern</h1>
      
      <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 0 0 L 3 0 L 1.5 3 z" fill="blue" stroke="green" />
            </pattern> 
         </defs>
         
         <g>
            <text x="30" y="50" >Using Pattern (Triangles): </text>
            <rect x="100" y="100" width="300" height="300" stroke="green" 
            stroke-width="3" fill="url(#pattern1)" />
         </g> 
         
      </svg>
   
   </body>
</html>

Un elemento <pattern> definido como pattern1.
En el patrón, se define un cuadro de visualización y se define una ruta que se utilizará como patrón.
en el elemento rect, en el atributo de relleno, se especifica la URL del patrón para llenar el rectángulo con el patrón creado anteriormente.

Salida

Abra textSVG.htm en el navegador web Chrome. Puede usar Chrome / Firefox / Opera para ver la imagen SVG directamente sin ningún complemento. Internet Explorer 9 y versiones posteriores también admiten la reproducción de imágenes SVG.

↰ Previous page Next page ↱