SVG - Padrões

SVG usa o elemento <pattern> para definir padrões. Os padrões são definidos usando o elemento <pattern> e são usados para preencher os elementos gráficos de forma ladrilhada.

Declaração

A seguir está a declaração de sintaxe de <pattern>elemento. Mostramos apenas os atributos principais.

<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

Sr. Não.	Nome e Descrição
1	patternUnits- unidades para definir a região do efeito dos padrões. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do padrão e para os atributos que definem a sub-região do padrão. Se patternUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento 'padrão' é usado. Se patternUnits = "objectBoundingBox", os valores representam os valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'padrão' é usado. O padrão é userSpaceOnUse.
2	patternContentUnits- unidades para definir a região de conteúdo do padrão. Ele especifica o sistema de coordenadas para os vários valores de comprimento dentro do padrão e para os atributos que definem a sub-região do padrão. Se patternContentUnits = "userSpaceOnUse", os valores representam os valores no sistema de coordenadas do usuário atual no local no momento em que o elemento 'padrão' é usado. Se patternContentUnits = "objectBoundingBox", os valores representam valores em frações ou porcentagens da caixa delimitadora no elemento de referência no local no momento em que o elemento 'padrão' é usado. O padrão é userSpaceOnUse.
3	x- coordenada do eixo x da caixa delimitadora do padrão. Defeault é 0.
4	y- coordenada do eixo y da caixa delimitadora do padrão. O padrão é 0.
5	width- largura da caixa delimitadora do padrão. O padrão é 0.
6	height- altura da caixa delimitadora do padrão. O padrão é 0.
7	preserveAspectRatio - para preservar a proporção largura / altura do conteúdo original.
8	xlink:href - usado para se referir a outro padrão.

Exemplo

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>

Um elemento <pattern> definido como pattern1.
No padrão, uma caixa de visualização é definida e um caminho que deve ser usado como padrão é definido.
no elemento ret, no atributo de preenchimento, o url do padrão é especificado para preencher o retângulo com o padrão criado anteriormente.

Resultado

Abra textSVG.htm no navegador Chrome. Você pode usar o Chrome / Firefox / Opera para visualizar a imagem SVG diretamente sem qualquer plugin. O Internet Explorer 9 e superior também oferece suporte à renderização de imagens SVG.

↰ Previous page Next page ↱