Usar o elemento Fill

Este tópico descreve o VML, um recurso preterido a partir do Windows Internet Explorer 9. As páginas da Web e os aplicativos que dependem do VML devem ser migrados para o SVG ou para outros padrões amplamente compatíveis.

Observação

A partir de dezembro de 2011, este tópico foi arquivado. Como resultado, ele não é mais mantido ativamente. Para obter mais informações, consulte Conteúdo arquivado. Para obter informações, recomendações e diretrizes sobre a versão atual do Windows Internet Explorer, consulte Internet Explorer Developer Center.

 

Como você aprendeu, você pode usar o atributo de propriedade fillcolor de um elemento de forma predefinido , como <oval> , , <line><polyline>, <curve>, <rect>, <roundrect>, <arc> , para especificar a cor usada para preencher a forma. Neste tópico, ilustraremos como desenhar uma forma preenchida com efeitos mais avançados.

Você pode colocar o <fill> subconjunto dentro do <shape>, ou <shapetype>, ou qualquer elemento de forma predefinido para descrever como preencher a forma. Em seguida, você pode usar os atributos de propriedade do <fill> subconjunto para personalizar o efeito de preenchimento, como preenchimento de gradiente, preenchimento de padrão, preenchimento de imagem.

Neste tópico:

• Preenchimento de Gradiente
• Preenchimento de Padrão
• Preenchimento de Imagem

Preenchimento de Gradiente

Para desenhar uma forma cheia de gradiente, você pode definir o atributo de propriedade de tipo do <fill> sub-elemento como "gradiente" ou "gradientRadial" e especificar outros atributos de propriedade do <fill> sub-elemento, como método, color2, foco e ângulo.

Exemplos:

Para criar uma forma que seja preenchida horizontalmente por gradiente, você pode definir o atributo de propriedade type como "gradiente", conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill type="gradient" />
</v:rect>

Se você alterar o atributo de propriedade fillcolor da forma, a forma será preenchida com gradiente com uma cor diferente. Você pode adicionar uma segunda cor especificando o atributo de propriedade color2 do <fill> subconjunto. Por exemplo, para criar uma forma preenchida por gradiente em duas cores, você pode adicionar uma segunda cor especificando o atributo de propriedade color2 do <fill> sub-elemento, conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill color2="blue" type="gradient" />
</v:rect>

Você pode definir o atributo de propriedade do método como "linear" ou "sigma" ou "any" ou "none". O efeito do gradiente é ligeiramente diferente. Além disso, você pode usar o atributo de propriedade angle, focus,focussize ou focusposition para alterar o modo de exibição do gradiente.

Exemplos:

 

Para criar uma forma que seja preenchida verticalmente por gradiente, você pode definir o atributo de propriedade angular como angle="-90", conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-90"
type="gradient" />
</v:rect>

Para criar uma forma cheia de gradiente da movimentação diagonal para cima, você pode definir o atributo de propriedade angular como angle="-135", conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-135"
type="gradient" />
</v:rect>

Para criar uma forma cheia de gradiente da diagonal movendo-se para baixo, você pode definir o atributo de propriedade angular como angle="-45", conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-45"
type="gradient" />
</v:rect>

Para criar uma forma que seja preenchida por gradiente do centro, você pode especificar angle="-45" focus="100%" focusposition=".5, .5" focussize="0, 0" type="gradientRadial", conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill method="linear sigma" angle="-45"
focus="100%" focusposition=".5,.5" focussize="0,0"
type="gradientRadial" />
</v:rect>

De volta ao topo

Preenchimento de Padrão

Para desenhar uma forma cheia de padrões, você pode definir o atributo de propriedade de tipo do <fill> subconjunto como "padrão" e especificar outros atributos de propriedade do <fill> subconjunto, como src e color2.

Exemplos:

Para criar uma forma preenchida com uma imagem padrão, você pode especificar o atributo de propriedade type como "pattern" e apontar o atributo de propriedade src para o local do arquivo de imagem padrão, conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="red">
<v:fill type="pattern" src="image1.gif"/>
</v:rect>

Se você apontar o atributo de propriedade src para um arquivo padrão diferente, poderá criar uma forma preenchida com um padrão diferente. Além disso, você pode alterar a cor especificando um valor diferente para o atributo de propriedade fillcolor ou color2 , conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' fillcolor="white">
<v:fill type="pattern" src="image2.gif"
color2="blue" />
</v:rect>

De volta ao topo

Preenchimento de Imagem

Para desenhar uma forma cheia de imagens, você pode definir o atributo de propriedade de tipo do <fill> subconjunto como "frame" e, em seguida, especificar outros atributos de propriedade do <fill> sub-elemento, como src e color2.

Exemplos:

Para criar uma forma preenchida com um arquivo de imagem, você pode especificar o atributo de propriedade de tipo como "frame" e, em seguida, apontar o atributo de propriedade src para o local do arquivo de imagem, conforme mostrado na seguinte representação VML:

<v:oval style='width:120pt;height:90pt' strokecolor="red"
strokeweight="2.5pt">
<v:fill type="frame" src="image1.jpg" />
</v:oval>

Você pode criar facilmente uma forma que é preenchida com uma imagem diferente apontando o atributo de propriedade src para outro arquivo.

Para obter mais informações sobre esse elemento, consulte a especificação VML .