Shape Element

HTML (DHTML)

Shape Element

Internet Development Index

Top level element used to describe a shape.

The following attributes modify a shape.

AttributeDescription
Adj Specifies an adjustment value used to define values for a formula.
AllowInCellDetermines whether a shape can be placed in a table.
AllowOverlapDetermines if a shape can overlap other shapes.
AltDefines alternative text to be displayed instead of a graphic.
BorderBottomColorBottom border color of an inline shape.
BorderLeftColorLeft border color of an inline shape.
BorderRightColorRight border color of an inline shape.
BorderTopColorTop border color of an inline shape.
BulletDetermines whether a shape is a graphical bullet.
ButtonDetermines whether a shape will be processed as a button.
BWModeDetermines how a shape will render for black-and-white output devices.
BWNormal Defines the black-and-white mode for normal black-and-white output devices.
BWPure Defines the black-and-white mode for pure black-and-white output devices.
ClassRefers to a definition of a CSS style.
ConnectorType Indicates the type of connector used for joining shapes.
CoordOrigSpecifies the coordinate unit origin of the rectangle that bounds a shape.
CoordSizeSpecifies the horizontal and vertical units of the rectangle that bounds a shape.
DoubleClickNotifySends an event message when a shape is double-clicked.
FillColorDefines the brush color that fills the closed path of a shape.
FilledDetermines whether the closed path will be filled.
FlipSwitches the orientation of a shape.
ForceDashDetermines whether a dashed outline is used to draw a shape when a shape has no line or fill.
HeightSpecifies the height of the shape.
HRSpecifies that a shape is a horizontal rule.
HRAlign Defines the alignment of a horizontal rule.
HRefDefines a URL for a shape. When the shape is clicked, the browser will load the URL.
HRHeightDefines the thickness of a horizontal rule.
HRNoShadeDetermines whether a horizontal rule will be displayed with 3-D shading.
HRPctDefines the length of a horizontal rule as a percentage of page width.
HRStdDetermines whether a shape is a standard horizontal rule.
HRWidthDefines the length of a horizontal rule.
IDProvides a unique identifier for an element.
LeftDetermines the position of the shape relative to the element left of it in the document flow.
Margin-BottomSpecifies the bottom edge of the shape's containing rectangle relative to the shape anchor.
Margin-LeftSpecifies the left edge of the shape's containing rectangle relative to the shape anchor.
Margin-RightSpecifies the right edge of the shape's containing rectangle relative to the shape anchor.
Margin-TopSpecifies the top edge of the shape's containing rectangle relative to the shape anchor.
MSO-Position-HorizontalSpecifies the horizontal positioning data for objects in Microsoft Word.
MSO-Position-Horizontal-RelativeSpecifies relative horizontal position data for objects in Microsoft Word.
MSO-Position-VerticalSpecifies the vertical position data for objects in Microsoft Word.
MSO-Position-Vertical-RelativeSpecifies relative vertical position data for objects in Microsoft Word.
MSO-Wrap-Distance-BottomDefines the distance from the bottom side of the shape to the text that wraps around it.
MSO-Wrap-Distance-LeftDefines the distance from the left side of the shape to the text that wraps around it.
MSO-Wrap-Distance-RightDefines the distance from the right side of the shape to the text that wraps around it.
MSO-Wrap-Distance-TopDefines the distance from the shape top to the text that wraps around it.
MSO-Wrap-EditedDetermines whether the wrap coordinates were customized by the user.
MSO-Wrap-ModeDefines the wrapping mode for text.
OLEIconDetermines whether an OLE object will be displayed as an icon.
OnEdDetermines whether the extra handles of a shape are hidden.
OnMouseOverTriggers a mouse event for a shape.
PathSpecifies the line that makes up the edges of a shape.
PositionDefines the type of positioning used to place an element.
PreferRelativeDetermines whether the original size of an object is saved after reformatting.
PrintDetermines whether the shape will be printed.
ReGroupIDDefines a previous group for a shape.
RelativePositionDefines a relative position for an object.
Rotation Defines the angle that a shape is rotated.
RuleInitiatorDetermines whether a rules engine will be used.
RuleProxyDetermines whether a proxy for the rules engine will be used.
SptDefines a number used internally by Microsoft Office to identify types of shapes.
StrokeColorDefines the brush color that strokes the path of a shape.
StrokedDefines whether the path will be stroked.
StrokeWeightDefines the brush thickness that strokes the path of a shape.
TableLimitsList of minimum height values for each row in a table.
TablePropertiesDetermines table properties.
TargetDefines a frame or window that a URL will be displayed in.
TitleDefines the text displayed when the mouse pointer moves over the shape.
TopDefines the position of the shape relative to the element above it in the flow of the page.
TypeDefines a reference to the ID of a ShapeType element.
UserDrawnDetermines whether the user has added the shape to a master slide.
UserHiddenDetermines whether a script anchor is hidden.
VisibilityDetermines whether a shape is displayed.
WidthDefines the width of the shape.
WrapCoordsDefines the bounding polygon that surrounds a shape.
Z-IndexDetermines the display order of overlapping shapes.

Remarks

This element may appear by itself or within a Group element.

The following is the minimum code needed to produce a shape. You must define the FillColor, Position, Top, Left, Width, Height and Path attributes or the shape will not be rendered.

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

In addition, you must put the following code in your HTML element of your web page to obtain the correct schemas for VML and Microsoft Office Extensions. If you are not using Office Extensions, you can omit the second schema.

xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"

You must also have the following in your STYLE element to register the behavior of VML and Microsoft Office Extensions. If you are not using Office Extensions, you can omit the second behavior definition.

v\:* { behavior: url(#default#VML); }
o\:* { behavior: url(#default#VML); }

Valid Subelements

The following are subelements of Shape.

ElementDescription
CalloutDefines a callout for a shape.
ExtrusionDefines an extrusion for a shape.
FillDefines a fill for a shape.
FormulasDefines formulas for a shape.
HandlesDefines handles for a shape.
ImagedataDefines image data for a shape.
LocksDefines a lock for a shape.
PathDefines a path for a shape.
ShadowDefines a shadow for a shape.
SkewDefines a skew for a shape.
StrokeDefines a stroke for a shape.
TextBoxDefines a textbox for a shape.
TextPathDefines a text path for a shape.

Other Elements

The following top-level elements work with Shape.

ElementDescription
GroupDefines a group of shapes.
ShapeTypeDefines a template for shapes.
VMLFrameDefines a frame for an external shape.

Predefined Shapes

Predefined shapes are the same as normal shapes except that some of them have additional attributes. The following shapes are predefined.

ElementDescription
RectDefines a rectangle for a shape.
RoundRectDefines a round rect for a shape.
LineDefines a line for a shape.
PolylineDefines a polyline for a shape.
OvalDefines an oval for a shape.
ImageDefines an image for a shape.
CurveDefines a curve for a shape.
ArcDefines an arc for a shape.

See Also

Data Types

Example

The following code comprises a sample VML Web page:

<HTML xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office">
<HEAD>
<STYLE>
v\:* { behavior: url(#default#VML);}
o\:* { behavior: url(#default#VML);}
</STYLE>
<TITLE>VML Sample</TITLE>
</HEAD>
<BODY>
   <v:shape
   fillcolor="green"
   style="position:relative;top:1;left:1;width:200;height:200"
   path = "m 1,1 l 1,200, 200,200, 200,1 x e">
   </v:shape>
</BODY>
</HTML>

Click here to see VML demos.