The <shape> ElementThe <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
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. |