The <fill> ElementAs we've seen, you can use the fill attribute to set fill colors. The <fill> element works like the fill attribute, except that it's an element you enclose in VML shape elements. I'll take a look at this element here, including so in VML shape elements. I'll take a look at this element here, including some of its more advanced capabilities. Here is the attribute list for the <fill> element: <!attlist fill id id #implied -- document-wide unique id -- type cdata #implied on cdata #implied color cdata #implied color2 cdata #implied opacity cdata #implied src cdata #implied size cdata #implied origin cdata #implied position cdata #implied alignshape cdata #implied colors cdata #implied angle cdata #implied focus cdata #implied focussize cdata #implied focusposition cdata #implied method cdata #implied > You can find these attributes explained in Table 19-3. Table 19-3. Attributes of the <fill> Element
Here is the XML template for this element, showing the default values for its attributes: <fill id=null type="solid" on="true" color="white" opacity="1.0" color2="white" opacity2="1.0" src=null size="auto" origin="center" position="center" aspect="ignore" alignshape="true" colors=null angle="0" focus="0" focussize="0,0" focusposition="0,0" method="sigma" /> You can create all kinds of fills, such as gradient fills, pattern fills, and picture fills. Creating Gradient FillsTo draw a gradient-filled shape, you can set the type property attribute of the <fill> subelement to "gradient" or "gradientRadial" . Then you specify other property attributes of the <fill> subelement, such as method , color2 , focus , and angle . Here's an example; in this case, I'm creating a shaded egg shape with a standard gradient fill: Listing ch19_17.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 Gradient Fills </H1> <v:oval style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" type="gradient" /> </v:oval> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-17. Figure 19-17. A gradient fill.
Another option is the gradientRadial fill type, in which the fill gradient is directed radially. Here's an example, this time with a rectangle: Listing ch19_18.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 Gradient Radial Fills </H1> <v:rect style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" type="gradientradial" /> </v:rect> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-18. Figure 19-18. A gradient radial fill.
You can also set the origin of gradient radial fills, as in this case. I'm setting the gradient origin to the center of the rectangle for an intriguing effect: Listing ch19_19.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 Gradient Radial Fills </H1> <v:rect style='width:200pt;height:100pt' fillcolor="blue" strokecolor="white"> <v:fill method="linear sigma" angle="45" focus="100%" focusposition=".5,.5" focussize="0,0" type="gradientradial" /> </v:rect> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-19. Figure 19-19. A gradient radial fill with origin at the center.
Creating Pattern FillsTo draw a pattern-filled shape, you can set the type property attribute of the <fill> element to "pattern" and then set the src property to the URI of an image file. For example, here's how I use the image ch19_21.jpg as a fill pattern: Listing ch19_20.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 Fill Patterns </H1> <v:rect style='width:200pt;height:100pt' fillcolor="red"> <v:fill type="pattern" src="ch19_21.jpg"/> </v:rect> </CENTER> </BODY> </HTML> Note that you can also specify the color of the fill you want, as in this case, where I'm making it red. You can see the result of this VML in Figure 19-20, where the image is repeatedly tiled inside a rectangle. Figure 19-20. A pattern fill.
Creating Picture FillsTo draw a picture-filled shape, you can set the type property attribute of the <fill> element to "frame" and then set the src property to the URI of the image you want to use. Here's an example; in this case, I'll display the image ch19_23.jpg: Listing ch19_21.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 Picture Fills </H1> <v:rect style='width:673px;height:89px'> <v:fill type="frame" src="ch19_23.jpg"/> </v:rect> </CENTER> </BODY> </HTML> You can see the result of this VML in Figure 19-21. Figure 19-21. A picture fill.
|