pattern

Um padrão é utilizado para preenchimento ou traçado de um objeto utilizando um objeto gráfico pré-definido o qual pode ser replicado ("ladrilhado") com intervalos fixados em x e y para cobrir as áreas que serão pintadas. Padrões são definidos utilizando o elemento pattern e, em seguida, referenciado pelas propriedades fill e stroke em um determinado elemento gráfico para indicar que o elemento em questão deveria ser preenchido ou traçado com o padrão referenciado.

Contexto de uso

Categorias Elemento recipiente
Conteúdo permitido Qualquer número dos seguintes elementos, em qualquer ordem:
Elementos de animação »
Elementos descritivos »
Elementos de forma »
Elementos estruturais »
Elementos de gradiente »
<a>, <altGlyphDef>, <clipPath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignObject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view>
Documento normativo SVG 1.1 (2ª Edição)

Exemplo

Código fonte Resultado
<?xml version="1.0"?>
<svg width="120" height="120" viewBox="0 0 120 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
        <pattern id="Triangle" 
                 width="10" height="10"
                 patternUnits="userSpaceOnUse">
            <polygon points="5,0 10,10 0,10"/>
	    </pattern>
    </defs>

    <circle cx="60" cy="60" r="50"
            fill="url(#Triangle)"/>
</svg>

» pattern.svg

Atributos

Atributos globais

Atributos específicos

Interface DOM

Este elemento implementa a interface do SVGPatternElement.

Etiquetas do documento e colaboradores

Etiquetas: 
Última atualização por: caio,