The <fill> Element
As 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 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.4.
This 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 Fills
To draw a gradient-filled shape, you can set the type property attribute of the <fill> subelement to "gradient" or "gradientradial", and then 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:
<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 results of this VML in Figure 19.19.
Figure 19.19. A gradient fill.
Another option is the gradientradial fill type, where the fill gradient is directed radially. Here's an example, this time with a rectangle:
<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 results of this VML in Figure 19.20.
Figure 19.20. A gradient radial fill.
You can also set the origin of gradient radial fills, as in this case, where I'm setting the gradient origin to the center of the rectangle for an intriguing effect:
<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 results of this VML in Figure 19.21.
Figure 19.21. A gradient radial fill with origin at the center.
Creating Pattern Fills
To 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 bubbles.bmp, which comes with Windows, as a fill pattern (after converting bubbles.bmp to a GIF file so that Internet Explorer can handle it):
<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="blue">
<v:fill type="pattern" src="bubbles.gif"/>
</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 blue (the original image is black and white). You can see the results of this VML in Figure 19.22, where the bubbles pattern is repeatedly tiled inside a rectangle.
Figure 19.22. A pattern fill.
Creating Picture Fills
To 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 fill.jpg:
<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="fill.jpg"/>
</v:rect>
</CENTER>
</BODY>
</HTML>You can see the results of this VML in Figure 19.23.
Figure 19.23. A picture fill.
