The fill Element | Real World XML (2nd Edition)

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 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

Namespace	Attribute	Type	Default Value	Description
VML	`alignshape`	`boolean`	`true`	Aligns the image with the shape if `true` . Otherwise, aligns the image with the window.
VML	`angle`	`number`	`"0"`	Specifies the angle along which the gradient is directed.
VML	`aspect`	`string`	`"ignore"`	Set to `"ignore"` to ignore aspect issues, `"atleast"` to specify that the image is at least as big as `imageSize` , or `"atmost"` to specify that the image is no bigger than `imageSize` .
VML	`color`	`color`	`"white"`	Sets the fill color.
VML	`color2`	`color`	`"white"`	Sets the secondary fill color for patterns.
VML	`colors`	`string`	`null`	Sets intermediate colors in the gradient and their relative positions along the gradient, as in `"20% red, 60% blue, 80% green"` .
VML	`focus`	`number`	`"0"`	Sets the focus point for linear gradient fill; possible values range from -100 to 100.
VML	`focus position`	`Vector2D`	`0,0`	For radial gradients, sets the position of the innermost rectangle.
VML	`focussize`	`Vector2D`	`0,0`	For radial gradients, sets the size of the innermost rectangle.
VML	`id`	`string`	`null`	Is a unique identifier for the shape.
VML	`method`	`string`	`"sigma"`	Sets the fill method. Set this to `"none"` , `"linear"` , `"sigma"` , or `"any"` .
VML	`on`	`boolean`	`true`	Turns the fill display on or off.
VML	`opacity`	`number`	`1.0`	Sets the opacity of the fill.
VML	`origin`	`Vector2D`	`"auto"`	Sets the origin, relative to the upper left of the image. By default, is set to the center of the image.
VML	`position`	`Vector2D`	`"auto"`	A point in the reference rectangle of the shape used to position the origin of the image. Specified as a fraction of the image size.
VML	`size`	`Vector2D`	`"auto"`	Gives the size of the image.
VML	`src`	`string`	`null`	Gives the URI of an image to load for image and pattern fills.
VML	`type`	`string`	`"solid"`	Sets the fill type. May be `"solid"` , `"gradient"` , `"gradientradial"` , `"tile"` , `"pattern"` , or `"frame"` .

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 Fills

To 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.

graphics/19fig17.gif

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.

graphics/19fig18.gif

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.

graphics/19fig19.gif

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 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.

graphics/19fig20.gif

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 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.

graphics/19fig21.gif