Using the <shapetype> ElementYou can parameterize the creation of shapes with the <shapetype> element. The <shapetype> element defines a shape type, and you can instantiate shapes of that type. You create a shape type and give it a name with the ID attribute of <shapetype> ; you use that shape type with the <shape> element's type attribute. Here's the attribute list of the <shapetype> element: <!attlist shapetype %coreattrs; %shapeattrs; adj cdata #implied -- list of adjust values for parameterized paths -- path cdata #implied -- string with command set describing a path -- > Here are the custom attributes of this element:
Here is the <shapetype> element's XML template: <shapetype 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 /> We've already seen an example using the <shapetype> element earlier in this chapter. In that example, the shape was defined with the path attribute like this: <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> The path defined here defines the shape. Specifying a path in the <shapetype> element is a little involved. You specify pairs of points along the path and use commands such as m (start a path), x (close the path), e (end the path), and so on. You can find the available commands in Table 19-3. This table also indicates how many parameters each command takes, using DTD notation. For example, 2* indicates that the command takes pairs of parameters. You can also skip any values that are zero when specifying points, so the point specification 16275,,15005,,13735,152 is the same as 16275,0,15005,0,13735,152 . Table 19-2. Commands for the path Attribute
Here's how you can use this <shapetype> element to create a shape as we've done earlier in the chapter: <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> The result of this VML appears in Figure 19-22. Figure 19-22. Using a VML text path.
You can list properties for the shape in the <shapetype> element, as in this example, which assigns a value to the fillcolor property. However, if you want to override those properties, you can; just specify new values in the <shape> element when you instantiate the shape. For example, here's how I turn the heart this VML draws to blue: Listing ch19_22.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: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" fillcolor="blue" style='width:200;height:160;'/> </CENTER> </BODY> </HTML> |