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 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.2; note that VML attributes can be part of either the VML or the CSS namespaces.
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, which you do by specifying a VML path. Doing 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; it draws a heart:
<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 results in Figure 19.2.
Another way of drawing this shape is to specify the shape's path in a <shapetype> element and then 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.
3.149.242.118