Introduction
Overview
History
Advice
Books
Tutorials

Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape

Special Topics
group
shapetype
positioning
animation
stylesheets

Community
Web Sites
Mailing Lists
USENET
Vendors
News

GBIC >> VML >> shape

shape Element
The VML pre-defined shapes are great for the creation quick graphics, but getting creative takes a lot more than circles and rectangles. The shape element is the workhorse of VML. With it, you can create any shape you can imagine.

Before You Start shape Attributes

Return to top of document

Before You Start

Before you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following:

    <html xmlns:v="urn:schemas-microsoft-com:vml">

Also, the following line must be placed in the <HEAD> section of the web page:

    <style> v\:* { behavior: url(#default#VML); }</style >

These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like:

    <html xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
    <style> v\:* { behavior: url(#default#VML); }</style >
    </head>
    <body>
    </body>
    </html>

Return to top of document

Shape Element

In addition to the pre-defined shapes offered by VML, programmers can also create custom shapes using the shape element of VML. It may be a bit confusing that VML uses the term 'shape' to describe the element which can be used to make custom shapes. But you'll find the context in which the word shape is used to help make it clear what is meant.

Like the pre-defined shapes, custom shapes are closed paths. In the following example of an isosceles triangle, the three minimum attributes of the shape element are demonstrated - height, width, and path. Note that height and width attributes are CSS properties whereas path is a shape attribute.

In this example, the custom shape is defined as contained in a bounding box of 200x200 pixels. The path attribute describes the outline of the shape as pairs of xy coordinates. The M in the path attribute defines the starting point of the shape outline (M for move to that point) and the coordinates after the L (lines) represent the lines to be drawn to make up the outline of the shape.

In this example, the custom shape starts at (0,200). A line is then drawn to (100,0) and then to (200,200). The line from the last point to the first is automatically drawn by using the X in the path element. The E ends the path.

Using the path is but one of three ways that the properties of a shape can be defined. The three methods are:

By the attributes of the vml:shape element
By the CSS styles of the vml:shape element, which are normally set inside a style attribute on the vml:shape element
By the child elements of the vml:shape element

The following table lists the more frequently used attributes of a shape element. A more complete list was given above in the section on Element & Attribute Summary.

Return to top of document

Attributes

Attribute	Value	Default
adj	A comma-delimited string of up to 8 integers that provides input parameters for vml:formulas child elements	None
alt	Alternate text shown if the shape can't be drawn for any reason; similar to the ALT \tattribute of HTML's IMG element	None
class	The class of the shape; used to attach CSS styles to groups of elements in the same class	None
coordorigin	The local coordinate of the upper- left corner of the shape's box	0, 0
coordsize	The width and height of the shape's box in the local coordinate space	Same as the width and height of the entire shape
fillcolor	The color the shape is filled with; for example, red or #66FF33	White
filled	A boolean specifying whether the shape is filled	False
href	The URL to jump to when the shape is clicked	None
id	A unique XML name for the element same as any other XML ID type attribute)	None
path	Commands that define the shape's path	None
strokecolor	The color used to draw the outline of the shape	Black
stroked	A boolean specifying whether the path (outline) of the shape should be drawn	True
strokeweight	The width of the line outlining the shape's path	1px
style	The CSS properties applied to this shape	None
target	The name of the frame or window that a URL loaded when the shape is clicked will be displayed in	None
title	The name of the shape; displayed when the mouse pointer moves over the shape	None
type	A reference to the ID of a vml:shapetype element	None

The child elements of a shape can also be used to modify a shape.

Element Name Purpose
extrusion A three-dimensional extruded effect
fill Specifies how and with what the shape is filled
formulas Formulas used to calculate the path of the shape
handles Handles by which the shape can be manipulated
imagedata A bitmapped picture from an external source rendered on top of the shape
path Commands specifying how to draw the shape's outline
shadow The shadow effect for the shape
skew An angle by which to skew the shape
stroke The visible outline of the shape
textbox Text inside the shape
textpath A path along which the text is drawn