Shape Element

The <Shape> element is the basic building block of VML. A shape may exist on its own or within a <Group> element. <Shape> defines many attributes and sub-elements that control the look and behavior of the shape. A shape must define at least a Path and size (@Width, @Height). VML also uses properties of the CSS2 style attribute to specify positioning and sizing.

Note that this subclause also applies to the set of pre-defined shape primitives provided by the VML elements <Arc>, <Curve>, <Image>, <Line>, <Oval>, <Polyline>, <Rect, a>nd <RoundRect>.

The following attributes are used to define a minimal shape:

Attribute

Description

FillColor

Brush color that fills the closed path of a shape.

Position

Type of positioning used to place an element.

Top

Position of the shape relative to the element above it in the flow of the page.

Left

Position of the shape relative to the element left of it in the document flow.

Width

Width of the shape.

Height

Height of the shape.

Path

Line that makes up the edges of a shape.

The following example creates a minimal shape:

<v:shape fillcolor="green"
  style="position:relative;top:1;left:1;width:50;
  height:50" path="m 1,1 l 1,50, 50,50, 50,1 x e">
</v:shape>

Although there is no official categorization of the <Shape> element’s attributes or sub-elements, it is useful to think of them in groups. The following sections broadly describe the characteristics of the <Shape> element. A few fundamental attributes and elements are introduced here. For complete details, see the VML reference in Part 4.