[Table of Contents] [docx version]

VML Reference Material - VML

fill (Shape Fill Properties)

This element specifies how the path should be filled if something beyond a solid color fill is desired.  The attributes of the fill element can be used to describe a powerful set of image- or gradient-based fill patterns.   Extensions to the VML fill definition are encoded as sub-elements of fill.

Parent Elements

arc6.1.2.1); background2.2.1); background6.1.2.2); curve6.1.2.3); group6.1.2.7); image6.1.2.10); line6.1.2.12); object2.3.3.19); oval6.1.2.13); pict2.3.3.21); pict2.9.23); polyline6.1.2.15); rect6.1.2.16); roundrect6.1.2.17); shape6.1.2.19); shapedefaults6.2.2.27); shapetype6.1.2.20)

 

Child Elements

Subclause

fill (Shape Fill Extended Properties)

§6.2.2.12

 

Attributes

Description

alignshape (Align Image With Shape)

Specifies whether an image will align with the shape. Default is true.

 

[Example: The image displayed in the shape is not rotated even though the shape is rotated 30 degrees:

 

<v:shape coordorigin="0,0"

coordsize="200,200"

style="top:1;left:1;width:50;

height:50;rotation:30"

path="m 1,1 l 1,200, 200,200, 200,1 x e">

<v:fill alignshape="false" type="frame"

src="myimage.gif">

</v:fill>

</v:shape>

   

Applied to a simple square the fill looks like this:

 

 

end example]

 

The possible values for this attribute are defined by the ST_TrueFalse simple type (§6.1.3.14).

althref (Alternate Image Reference Location)

 

Namespace: urn:schemas-microsoft-com:office:office

Defines an alternate reference for an image in Macintosh PICT format.

 

[Example:

 

<v:fill ... althref="myimage.pcz" ... >

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

angle (Gradient Angle)

Specifies the direction of a gradient. The vector of a gradient is perpendicular to the vector of the blend direction from one color to another. The default value is zero degrees, which is a horizontal vector from left to right. Positive angles rotate the gradient in a counter-clockwise direction.

 

[Example: The fill is composed of a 45-degree gradient of two colors. Blue is in the top left corner and red is in the bottom right corner.

 

<v:fill type="gradient" color="red"

color2="blue" angle="45">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema decimal datatype.

aspect (Image Aspect Ratio)

Specifies how the fill image aspect ratio will be preserved. Default is ignore. Allowed values are:

 

ignore - Ignore aspect ratio.

atleast - At least as large as defined by the size attribute.

atmost - No larger than that defined by the size attribute.

 

In each case, the size attribute will be adjusted to preserve the aspect ratio of the image.

 

[Example: The image that makes up the fill is no larger than 20 points by 20 points, limiting the size of the tiles inside the shape.

 

<v:fill type="tile" aspect="atmost"

size="20pt,20pt" src="myimage.gif">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the ST_ImageAspect simple type (§6.1.3.6).

color (Primary Color)

Specifies the main fill color; functions the same as the fillcolor attribute of the shape element (§6.1.2.19). This attribute overrides the shape's fillcolor. Default is white. Colors are typically specified as either a named color, such as red, or six hexadecimal digits representing the red, green and blue values of the color, such as #00FF30. Full details are specified in the simple type description.

 

[Example: The shape is blue:

 

<v:shape ... fillcolor="red" ... >

<v:fill color="blue"/>

</v:shape>

 

end example]

 

The possible values for this attribute are defined by the ST_ColorType simple type (§6.1.3.1).

color2 (Secondary Color)

Specifies the secondary fill color, used when a fill type is a pattern or a gradient. Default is white. Colors are typically specified as either a named color, such as red, or six hexadecimal digits representing the red, green and blue values of the color, such as #00FF30. Full details are specified in the simple type description.

 

[Example: The shape is filled with a horizontal gradient with red at the bottom and blue on top:

 

<v:fill type="gradient"

color="red" color2="blue">

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the ST_ColorType simple type (§6.1.3.1).

colors (Intermediate Colors)

Specifies an array of comma-separated percentage-color pairs that define intermediate colors and their positions in a gradient fill. The primary color, specified either by the fillcolor attribute of the shape element (§6.1.2.19) or the color attribute of the fill element (§6.1.2.5), is used at the 0% endpoint. The secondary color, specified by the color2 attribute of the fill element (§6.1.2.5), is used at the 100% endpoint. The numeric values may also be specified in 1/65536-ths if a trailing "f" is supplied. For example, a value of "52429f" represents 52429/65536 or 0.8.

 

[Example: The shape is filled with a horizontal gradient colored, from bottom to top, red, yellow, green, blue:

 

<v:fill type="gradient"

color="red" color2="blue"

colors="30% yellow,70% green">

</v:fill>

 

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

detectmouseclick (Detect Mouse Click)

 

Namespace: urn:schemas-microsoft-com:office:office

Specifies whether a mouse click is detected on the fill of a shape.

 

The possible values for this attribute are defined by the ST_TrueFalse simple type (§6.2.3.23).

focus (Gradient Center)

Specifies the center starting position of a gradient. Values range from 100% to -100%. Default is 0.

 

A value of 100% or -100% reverses the direction of the gradient (in effect swapping color and color2). A value of 50% changes the gradient so that color is at both ends and color2 is in the middle. A value of -50% changes the gradient so that color2 is at both ends and color is in the middle.

 

[Example: The shape is filled with a horizontal gradient with red at both ends and blue in the middle:

 

<v:fill type="gradient"

color="red" color2="blue"

focus="50%">

</v:fill>

 

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

focusposition (Radial Gradient Center)

Specifies the position of the center rectangle of a radial gradient. The vector is a fraction of the width and height of the shape. The first is a percentage of the fill to the left edge; the second is a percentage of the fill to the top. Default is 0,0. To position a radial fill at the center of a shape, use a value of 50%,50%.

 

[Example: The shape is filled with a rectangular gradient positioned in the top-left quadrant of the shape. The interior of the gradient is blue and the exterior is red:

 

<v:fill type="gradientradial"

color="red" color2="blue"

focusposition="25%,25%">

</v:fill>

 

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

focussize (Radial Gradient Size)

Specifies the size of the center rectangle of a radial gradient. The vector is a fraction of the width and height of the shape. The first is a percentage of the fill to the right edge; the second is a percentage of the fill to the bottom. Default is 0,0.

 

A focussize value of 100%,100% and a focusposition of 0,0 makes color2 dominate the gradient completely. Small values of around 10%,10% are recommended for balanced gradients.

 

[Example: The shape is filled with a rectangular gradient positioned in the top-left quadrant of the shape. The interior of the gradient is blue and the exterior is red. The red portion is wider on the bottom and right sides of the blue region. The pure blue region is 25% the width and 25% the height of the shape:

 

<v:fill type="gradientradial"

color="red" color2="blue"

focussize="25%,25%"

focusposition="25%,25%">

</v:fill>

 

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

href (Hyperlink Target)

 

Namespace: urn:schemas-microsoft-com:office:office

Specifies the URL to the original image file. Used only if the picture has been linked and embedded. Default is no value.

 

[Example:

 

<v:fill ... o:href="myimage.gif" ... >

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

id (Unique Identifier)

Specifies a unique identifier that can be used to reference a VML object.

 

Default is no value.

 

[Example:

 

<v:shape ... id="myShape" ... >

</v:shape>

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

id (Relationship to Part)

 

Namespace: .../officeDocument/2006/relationships

Specifies the relationship ID of the relationship to the image used for this fill. The specified relationship shall be of type http://schemas.openxmlformats.org/officeDocument/2006/relationships/image or the document shall be considered non-conformant.

 

[Example: The markup specifies the associated relationship part with relationship ID rId10 contains the corresponding relationship information for the fill:

 

< ... r:id="rId10" />

 

end example]

 

The possible values for this attribute are defined by the ST_RelationshipId simple type (§7.8.2.1).

method (Gradient Fill Method)

Specifies the method used to generate the transition from color to color2 in a gradient fill. Default is sigma.

 

[Example:

 

<v:fill type="gradient"

color="red" color2="blue" method="any">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the ST_FillMethod simple type (§6.1.3.4).

on (Fill Toggle)

Specifies whether to fill the shape. Default is true. This attribute overrides the shape's fill attribute.

 

[Example: The shape has a transparent fill:

 

<v:shape ... fill="true" ... >

<v:fill color="red" on="false">

</v:fill>

</v:shape>

 

end example]

 

The possible values for this attribute are defined by the ST_TrueFalse simple type (§6.1.3.14).

opacity (Primary Color Opacity)

Specifies the opacity of the primary fill color. Default is 1.0. This numeric value may also be specified in 1/65536-ths if a trailing "f" is supplied. For example, a value of "52429f" represents 52429/65536 or 0.8.

 

[Example: The red color is 25% opaque:

 

<v:fill type="gradient" color="red"

color2="blue" opacity=".25">

</v:fill>

 

opacity="1"

opacity=".25"

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

opacity2 (Secondary Color Opacity)

 

Namespace: urn:schemas-microsoft-com:office:office

Specifies the opacity of the secondary fill color. Default is 1.0. This numeric value may also be specified in 1/65536-ths if a trailing "f" is supplied. For example, a value of "52429f" represents 52429/65536 or 0.8.

 

[Example: The blue color is 25% opaque:

 

<v:fill type="gradient" color="red"

color2="blue" o:opacity2=".25">

</v:fill>

 

opacity2="1"

opacity2=".25"

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

origin (Fill Image Origin)

Specifies the position of the origin of a fill image as a point relative to the top left corner of the image. The vector is a fraction of the width and height of the image. Default is the center of the image. These numeric values may also be specified in 1/65536-ths if a trailing "f" is supplied. For example, a value of "52429f" represents 52429/65536 or 0.8.

 

[Example: The origin of the image is 25% to the right and 25% above the image's top left corner:

 

<v:fill type="tile" src="myimage.gif"

origin="0.25,-0.25">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

position (Fill Image Position)

Specifies the position of the origin of a fill image as a point within its containing shape. The vector is a fraction of the width and height of the shape. These numeric values may also be specified in 1/65536-ths if a trailing "f" is supplied. For example, a value of "52429f" represents 52429/65536 or 0.8.

 

[Example: The origin of the image is positioned 25% to the right of the left edge of the shape and 25% down from the shape's top:

 

<v:fill type="tile" src="myimage.gif"

position="0.25,0.25">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

recolor (Recolor Fill as Picture)

Specifies that the fill uses an image. Default is false.

 

[Example:

 

<v:fill r:id="rId4" o:title="MyPic" recolor="true"

type="frame">

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the ST_TrueFalse simple type (§6.1.3.14).

relid (Relationship to Part)

 

Namespace: urn:schemas-microsoft-com:office:office

Specifies the relationship ID of the relationship to the image. The specified relationship shall be of type http://schemas.openxmlformats.org/officeDocument/2006/relationships/image or the document shall be considered non-conformant.

 

[Example: The markup specifies the associated relationship part with relationship ID rId10 contains the corresponding relationship information:

 

<v:fill ... o:relid="rId10" ...>

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the ST_RelationshipId simple type (§6.2.3.20).

rotate (Rotate Fill with Shape)

Specifies whether the fill is rotated with the shape. Default is false.

 

[Example: The gradient is rotated with the shape:

 

<v:fill color2="white" focus="100%" rotate="true"

type="gradient">

</v:fill>

 

rotate="true"

rotate="false"

 

end example]

 

The possible values for this attribute are defined by the ST_TrueFalse simple type (§6.1.3.14).

size (Fill Image Size)

Specifies the size of the fill image. Default is the native image pixel size.

 

[Example: The image is reduced in size disproportionately:

 

<v:fill type="tile" src="myimage.gif"

size="25pt,15pt">

</v:fill>

 

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

src (Fill Image Source)

Specifies the URL specifying the fill image to use.

 

[Example:

 

<v:fill ... src="myimage.gif" ... >

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

title (Title)

 

Namespace: urn:schemas-microsoft-com:office:office

Specifies the title of an embedded fill image. This is typically set to the comment property of the image, which is often blank.

 

[Example:

 

<v:fill ... o:title="alt text" ... >

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the XML Schema string datatype.

type (Fill Type)

Specifies the type of fill. Default is solid. Allowed values are:

 

solid

gradient

gradientradial

tile

pattern

frame

 

[Example: Applied to a simple square using the following fill element, the three gradient types look like this:

 

<v:fill color="red" color2="blue"

type="solid">

</v:fill>

 

type="solid"

type="gradient"

type="gradientradial"

 

Applied to a simple square using the following fill elements, the three image types look like this:

 

<v:fill src="myimage.gif"

type="tile" size="50%,50%">

</v:fill>

 

<v:fill src="myimage.gif"

type="frame" size="50%,50%">

</v:fill>

 

<v:fill src="myimage.gif"

color="red" color2="blue"

type="pattern">

</v:fill>

 

end example]

 

The possible values for this attribute are defined by the ST_FillType simple type (§6.1.3.5).

The following XML Schema fragment defines the contents of this element:

<complexType name="CT_Fill">

   <sequence>

   <element ref="o:fill" minOccurs="0"/>

   </sequence>

   <attributeGroup ref="AG_Id"/>

   <attribute name="type" type="ST_FillType" use="optional"/>

   <attribute name="on" type="ST_TrueFalse" use="optional"/>

   <attribute name="color" type="ST_ColorType" use="optional"/>

   <attribute name="opacity" type="xsd:string" use="optional"/>

   <attribute name="color2" type="ST_ColorType" use="optional"/>

   <attribute name="src" type="xsd:string" use="optional"/>

   <attribute ref="o:href"/>

   <attribute ref="o:althref"/>

   <attribute name="size" type="xsd:string" use="optional"/>

   <attribute name="origin" type="xsd:string" use="optional"/>

   <attribute name="position" type="xsd:string" use="optional"/>

   <attribute name="aspect" type="ST_ImageAspect" use="optional"/>

   <attribute name="colors" type="xsd:string" use="optional"/>

   <attribute name="angle" type="xsd:decimal" use="optional"/>

   <attribute name="alignshape" type="ST_TrueFalse" use="optional"/>

   <attribute name="focus" type="xsd:string" use="optional"/>

   <attribute name="focussize" type="xsd:string" use="optional"/>

   <attribute name="focusposition" type="xsd:string" use="optional"/>

   <attribute name="method" type="ST_FillMethod" use="optional"/>

   <attribute ref="o:detectmouseclick"/>

   <attribute ref="o:title"/>

   <attribute ref="o:opacity2"/>

   <attribute name="recolor" type="ST_TrueFalse" use="optional"/>

   <attribute name="rotate" type="ST_TrueFalse" use="optional"/>

   <attribute ref="r:id" use="optional"/>

   <attribute ref="o:relid" use="optional"/>

</complexType>