Usando o elemento Stroke

Este tópico descreve o VML, um recurso que foi preterido a partir do Windows Internet Explorer 9. Páginas da Web e aplicativos que dependem de VML devem ser migrados para SVG ou 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.

 

Usando <stroke>

Como você aprendeu, você pode usar os atributos de propriedade strokecolor e strokeweight de uma forma predefinida , como <oval> , <line>, <polyline>, <curve><rect>, <roundrect>, <arc> , para especificar a cor e o peso da estrutura de tópicos de uma forma. Neste tópico, ilustraremos como desenhar uma forma que tenha uma estrutura de tópicos mais avançada.

Você pode colocar o <stroke> subelemento dentro do <shape>, ou <shapetype>ou qualquer elemento de forma predefinido para descrever como desenhar a estrutura de tópicos da forma. Em seguida, você pode usar os atributos de propriedade , por exemplo, dashstyle, opacidade, linestyle, joinstyle, filltype - do <stroke> subelemento para personalizar a estrutura de tópicos.

Voltar ao início

Dashstyle

Você pode usar o atributo de propriedade dashstyle do <stroke> subelemento para desenhar uma estrutura de tópicos com vários estilos de traço.

Exemplos:

Se você especificar <v:stroke dashstyle="solid" /> dentro do <line> elemento , poderá criar uma linha sólida, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="solid" />
</v:line>

Se você alterar o atributo de propriedade dashstyle para "ponto", poderá criar uma linha pontilhada, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dot" />
</v:line>

Se você alterar o atributo de propriedade dashstyle para "dash", poderá criar uma linha de traço, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dash" />
</v:line>

Se você alterar o atributo de propriedade dashstyle para "dashdot", poderá criar uma linha com um estilo tracejado e pontilhado, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="dashdot" />
</v:line>

Se você alterar o atributo de propriedade dashstyle para "longdash", poderá criar uma linha com um estilo tracejado longo, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdash" />
</v:line>

Se você alterar o atributo de propriedade dashstyle para "longdashdot", poderá criar uma linha com um estilo longo tracejado e pontilhado, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,20pt" to="200pt,20pt"
strokecolor="red" strokeweight="2pt">
<v:stroke dashstyle="longdashdot" />
</v:line>

Se você colocar <v:stroke dashstyle="dashdot" /> dentro do <rect> elemento , poderá criar um retângulo que tenha uma estrutura de tópicos tracejada e pontilhada, conforme mostrado na seguinte representação VML:

<v:rect style='width:100pt;height:80pt' strokecolor="red" strokeweight="2pt"/>
<v:stroke dashstyle="dashdot" />
</v:rect>

Voltar ao início

opacidade

Você pode usar o atributo de propriedade opacity do <stroke> subelemento para desenhar uma estrutura de tópicos com vários estilos de opacidade. O valor do atributo de propriedade opacity pode ser qualquer número entre 0 e 1. Por padrão, é 1, indicando opacidade total.

Exemplos:

A seguinte representação VML cria uma linha com opacidade completa:

<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
</v:line>

Se você adicionar <v:stroke opacity="0.5" /> dentro do <line> elemento , poderá criar uma linha com opacidade de 50%, conforme mostrado na seguinte representação VML:

<v:line style='position:relative;' from="20pt,50pt" to="200pt,50pt" strokecolor="red"
strokeweight="2pt">
<v:stroke opacity="0.5" />
</v:line>

Voltar ao início

Linestyle

Você pode usar o atributo de propriedade linestyle do <stroke> subelemento para desenhar uma estrutura de tópicos com vários estilos de linha.

Exemplos:

Se você especificar <v:stroke linestyle="single" /> dentro do <rect> elemento , poderá criar um retângulo com uma única estrutura de tópicos, conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' strokecolor="red" strokeweight="10pt">
<v:stroke linestyle="single" />
</v:rect>

Se você alterar o atributo de propriedade linestyle para "thinthin", poderá criar um retângulo com a estrutura de tópicos (1:1:1), conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthin" />
</v:rect>

Se você alterar o atributo de propriedade linestyle para "thinthick", poderá criar um retângulo com a estrutura de tópicos (1:1:2), conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thinthick" />
</v:rect>

Se você alterar o atributo de propriedade linestyle para "thickthin", poderá criar um retângulo com a estrutura de tópicos (2:1:1), conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickthin" />
</v:rect>

Se você alterar o atributo de propriedade linestyle para "thickbetweenthin", poderá criar um retângulo com a estrutura de tópicos (1:1:2:1:1), conforme mostrado na seguinte representação VML:

<v:rect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="10pt">
<v:stroke linestyle="thickbetweenthin" />
</v:rect>

Voltar ao início

joinstyle

Você pode usar o atributo joinstyle do <stroke> subelemento para definir como as linhas são unidas.

Por exemplo, para criar uma forma que tenha a estrutura de tópicos de junção redonda, conforme mostrado na ilustração a seguir, você pode especificar <v:stroke joinstyle="round" /> dentro do <polyline> elemento , conforme mostrado na seguinte representação VML:

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="round" />
</v:polyline>

Se você alterar o atributo de propriedade joinstyle para "bisel", poderá criar uma forma que tenha a estrutura de tópicos de junção de bisel, conforme mostrado na seguinte representação VML:

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="bevel" />
</v:polyline>

Se você alterar o atributo de propriedade joinstyle para "miter", poderá criar uma forma que tenha a estrutura de tópicos miter-join, conforme mostrado na seguinte representação VML:

<v:polyline
points="81pt,54pt,126pt,54pt,126pt,27pt,180pt,63pt,126pt,90pt,126pt,1in,81pt,1in"
strokecolor="red" strokeweight="20pt">
<v:stroke joinstyle="miter" />
</v:polyline>

Voltar ao início

Filltype

Você pode usar o atributo de propriedade filltype do <stroke> subelemento para desenhar uma estrutura de tópicos com vários efeitos de preenchimento.

Exemplos:

Se você especificar <v:stroke filltype="solid" /> dentro do <roundrect> elemento , poderá criar um retângulo arredondado com a estrutura de tópicos de preenchimento sólido, conforme mostrado na seguinte representação VML:

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="solid" />
</v:roundrect>

Se você alterar o atributo de propriedade filltype para "pattern", aponte o atributo da propriedade src para o local do arquivo de imagem padrão e defina o atributo de propriedade color2 como a segunda cor de padrão, você poderá criar um retângulo arredondado com uma estrutura de tópicos padrão, conforme mostrado na seguinte representação VML:

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="pattern" src="image.gif"
color2="green" />
</v:roundrect>

Se você alterar o atributo de propriedade filltype para "bloco" e apontar o atributo da propriedade src para o local do arquivo de imagem, poderá criar um retângulo arredondado com uma estrutura de tópicos em bloco, conforme mostrado na seguinte representação VML:

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="tile" src="image2.gif" />
</v:roundrect>

Se você alterar o atributo de propriedade filltype para "frame" e apontar o atributo de propriedade src para o local do arquivo de imagem, poderá criar um retângulo arredondado com uma estrutura de tópicos de imagem, conforme mostrado na seguinte representação VML:

<v:roundrect style='width:120pt;height:80pt' strokecolor="red"
strokeweight="15pt">
<v:stroke filltype="frame" src="image2.gif" />
</v:roundrect>

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