The shape Element

The <shape> Element

The <shape> element is the primary one in VML, although I rarely find myself using it in practice (I mostly use the predefined shapes based on <shape> ). This element may appear by itself or within a < group > element. The <shape> element includes all the attributes in coreattrs and shapeattrs , and it adds three more:

 <!attlist shape %coreattrs; %shapeattrs;  type cdata #implied -- reference to shapetype -- adj cdata #implied -- list of adjust values for parameterized paths -- path cdata #implied -- string with command set describing a path -- > 

For the sake of reference, all the attributes of this element and their descriptions appear in Table 19-1. Note that VML attributes can be part of either the VML or CSS namespaces.

Table 19-1. Attributes of the <shape> Element

Namespace	Attribute	Type	Default Value	Description
CSS	flip	string	null	Specifies that the shape image inside the reference rectangle should be flipped along the given axes in the order specified. Takes the values x or y or both.
CSS	height	number	100	Specifies the height of the containing block of the shape.
CSS	left , margin-left , center-x , etc.	number		Sets the position of the left of the containing block of the shape.
CSS	position	string	"static"	Sets the CSS type of positioning. When inside a group, this value must always be "absolute ".
CSS	rotation	number		Specifies the angle to rotate by.
CSS	top , margin-top , center-y , etc.	number		Sets the position of the top of the containing block of the shape.
CSS	visibility	string	visible	Sets the visibility of shapes.
CSS	width	number	100	Specifies the width of the container rectangle of the shape.
CSS	z-index	number		Specifies the z-index of the shape. Positive numbers come out of the screen, and negative ones come into it.
VML	adj	string	null	Gives a comma-separated list of numbers that are "adjusting" parameters for the formulas that define the path of the shape.
VML	alt	string	null	Gives text associated with the shape that may appear instead of the shape.
VML	chromakey	color	null	Sets a color value that will be transparent so that anything behind the shape will show through.
VML	class	string	null	Gives the CSS class of this shape.
VML	coordorigin	Vector2D	"0 0"	Gives the coordinates at the top-left corner of the containing block.
VML	coordsize	Vector2D	"1000 1000"	Gives the width and height of the coordinate space inside the containing block of this shape.
VML	fill	boolean	true	If "true" , the path defining the shape will be filled.
VML	fillcolor	color	"white"	Gives the color of the brush to use to fill the path of this shape.
VML	href	string	null	Gives the URI to jump to when this shape is clicked.
VML	id	string	null	Is a unique identifier for the shape.
VML	opacity	number	1.0	Sets the opacity of the entire shape. Set to values between (transparent) and 1 ( opaque .)
VML	path	string	null	Gives the path that defines the shape. This is a string containing the commands that define the path.
VML	print	boolean	true	If true , this shape should be printed.
VML	stroke	boolean	true	If true , the path defining the shape will be stroked (rendered) using a solid line unless there is a stroke subelement.
VML	strokecolor	color	"black"	Sets the color of the brush to use to draw the path of this shape.
VML	strokeweight	number	"0.75pt"	Sets the width of the brush to use to stroke the path.
VML	target	string	null	Gives the target frame URI.
VML	title	string	null	Gives the title of the shape.
VML	type	string	null	Holds a shapetype ID that describes the shape.
VML	v	string	null	Gives a string containing the commands that define the path.
VML	wrapcoords	string	null	Used for the wrapping text around an object.

Microsoft gives all VML elements an "XML template" that specifies default values for each of its attributes. Here's the XML template for the <shape> element:

 <shape  type=null adj=null path=null opacity="100%" chromakey="none" stroke="true" strokecolor="black" strokeweight="0.75pt" fill="true" fillcolor="white" print="true" id=null class=null style='visibility: visible' title=null href=null target=null alt=null coordsize="1000, 1000" coordorigin="0, 0" wrapcoords=null /> 

Using the <shape> element to draw shapes can be a little complex because you need to define the whole shape yourself; you do this by specifying a VML path. That means giving the actual locations to use to draw the shape. To show how that works, I'll use a shape that Microsoft supports in its reference material and that draws a heart:

Listing ch19_02.html

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">     <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>         v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Shapes             </H1>  <v:shape fillcolor="red"   strokecolor="red" coordsize="21600,21600"   path="m10860,2187c10451,1746,9529,1018,9015,730,   7865,152,6685,,5415,,4175, 152,2995,575,1967,   1305,1150,2187,575,3222,242,4220,,5410,242,6560,   575,7597l10860, 21600,20995,7597c21480,6560,   21600,5410,21480,4220,21115,3222,20420,2187,19632,   1305,18575,575,17425,152,16275,,15005,,13735,152,   12705,730,12176,1018,11254,1746, 10860,2187xe"   style='width:200;height:160;'/>  </CENTER>     </BODY> </HTML> 

You can see the result in Figure 19-2.

Figure 19-2. Using the <shape> element.

Another way of drawing this shape is to specify the shape's path in a <shapetype> element and reference the <shapetype> element's ID with the <shape> element's type attribute:

 <HTML xmlns:v="urn:schemas-microsoft-com:vml">      <HEAD>         <TITLE>             Using Vector Markup Language         </TITLE>         <STYLE>         v\:* {behavior: url(#default#VML);}         </STYLE>     </HEAD>     <BODY>         <CENTER>             <H1>                 VML Shapes             </H1>  <v:shapetype id="Valentine" fillcolor="red"   strokecolor="red" coordsize="21600,21600"   path="m10860,2187c10451,1746,9529,1018,9015,730,   7865,152,6685,,5415,,4175, 152,2995,575,1967,   1305,1150,2187,575,3222,242,4220,,5410,242,6560,   575,7597l10860, 21600,20995,7597c21480,6560,   21600,5410,21480,4220,21115,3222,20420,2187,19632,   1305,18575,575,17425,152,16275,,15005,,13735,152,   12705,730,12176,1018,11254,1746, 10860,2187xe">   </v:shapetype>   <v:shape type="#Valentine" style='width:200;height:160;'/>  </CENTER>     </BODY> </HTML> 

However, unless you have a drawing tool of some kind, it's pretty tedious to calculate all the points in a path; it's usually far easier to use the predefined shapes.