The Shape elmentShapes are the building blocks of graphical images defined by Vector Markup Language (VML). The shape is the top-level element and severalsubelements help define the nature of each shape. Arc Polyline Curve Rect Line RoundRect
The Shape element This is the top-level element used to describe a shape. This element may appear by itself or within a <group> element. If a <shapetype> is referenced using the type= attribute, any attributes specified in the shape will override those found in the shapetype.<!element shape (%shape.elements;)* ><!attlist shape %coreattrs; %shapeattrs; type cdata #implied -- reference to shapetype -- adj cdata #implied -- list of adjust values for parameterizedpaths -- path cdata #implied -- string with command set describing apath - >
Menu1 Introduction fill element2 Table properties3 Description Attribute4 Thank you !
Introduction fill elementThis sub-element may appear insidea shape, shapetype, background or most predefined shapeelements to describe how the path should be filled ifsomething beyond a solid color fill is desired. Theattributes of the fill element can used to describe apowerful set of image or gradient based fillpatterns. Extensions to the VML fill definition may beencoded as sub-elements offill.
Table properties DefaultName Space Attribute Type Description Value A unique ID that identifies the shape. Used by script to reference the VML id string null shape in a collection. May be "solid | gradient | gradientradial | tile | pattern | frame" "Tile", "pattern" and "frame" require the image attributes to be supplied. VML type string "solid" "Gradient", "gradientradial" and "gradienttitle" requires the gradient attributes to be supplied. Types beyond these are specified using sub-elements.. Turns fill display on. Same as fill attribute in shape. This overrides VML on boolean true the <shape> fill attribute. The main fill color. Same as fillcolor attribute in shape. This VML color color "white" overrides the shape fillcolor attribute. VML opacity number 1.0 Opacity of the fill. The secondary color for fill when imageType="pattern" or for gradient VML color2 color "white" fills.
Table properties Attributes related to image fills.VML src string null URL to an image to load for image and pattern fills. The size of the image. Default is pixel size of the image. May beVML size Vector2D "auto" specified in CSS absolute units or as a fraction of the path bounding box. Point relative to upper left corner of the image that is treated as theVML origin Vector2D "auto" origin of the image, specified as a fraction of the image size. Default is the center of the image. Point in the reference rectangle of the shape to position the origin ofVML position Vector2D "auto" the image, specified as a fraction of the image size. Default is the center of the containing block. "ignore" – ignore aspect issues, "atleast" – image is at least as big as the imageSize, "atmost" – image is no bigger than imageSize. In eachVML aspect string "ignore" case, the imageSize attribute will be adjusted to preserve the aspect of the image. If "true", align the image with the shape else align the image with theVML alignshape boolean true window.
Table properties Attributes related to gradient fills. Intermediate colors in the gradient and their relative positions along the gradient. e.g. "30% red, 70% blue, 90% green". Primary colorVML colors string null (fillcolorattribute in shape) is 0% and secondary color (color2 attribute) is 100%.VML angle number "0" The angle along which the gradient goesVML focus number "0" Focus point for linear gradient fill. Values go from –100 to +100.VML focussize Vector2D 0,0 Size of the inner most rectangle for radial gradientsVML focusposition Vector2D 0,0 Position of the inner most rectangle for radial gradientsVML method string "sigma" "none", "linear", "sigma" or "any"
Description AttributeID Attribute: A name that provides a unique identifier for a fill. Read/write. String.Tag Syntax : <v: element id="expression">Script Syntax:element.id="expression"expression=element.idRemarks:Use ID to refer to a specific fill. Once you have created a fill and given it an ID, you can use the ID namewhen you want to manipulate the fill.ExampleThe shape has a fill ID called "myfill".<v:shape id="rect01"coordorigin="0 0" coordsize="200 200"strokecolor="red"style="top:1;left:1;width:50;height:50"path="m 1,1 l 1,200, 200,200, 200,1 x e"> <v:fill id="myfill"/> </v:shape>
Description AttributeType Attribute : Determines the type of fill. Read/write. VgFillType.Tag Syntax : <v: element type="expression">Script Syntax :element.type="expression"expression=element.typeRemarks: Values include:Type Descriptionsolid The fill pattern is solid. Default.gradient The fill colors blend together in a linear gradient from bottom to top.gradientradial The fill colors blend together in a radial gradient.tile The fill image is tiled.pattern The image is used to create a pattern using the fill colors.frame The image is stretched to fill the shape.ExampleA red foreground and blue background fill is created using the pattern of the image myimage.gif <v:shape id="rect01"coordorigin="0 0" coordsize="200 200" strokecolor="red"style="top:1;left:1;width:50;height:50"path="m 1,1 l 1,200, 200,200, 200,1 x e"><v:fill color="red" color2="blue" type="pattern" src="myimage.gif"/></v:shape>
Description AttributeSrc Attribute: Defines the image to load for a fill. Read/write. String.Tag Syntax : <v: element src="expression">Script Syntax:element.src="expression"expression=element.srcRemarksURL to an image to load for image and pattern fills. This attribute must always be present and point tovalid image data for a picture to appear. If this attribute appears alone (that is, no HRef or Titleattribute), then the image is linked.ExampleA tiled image using the file myimage.gif as a source is displayed.<v:shape id="rect01"coordorigin="0 0"coordsize="200 200"strokecolor="red"style="top:1;left:1;width:50;height:50"path="m 1,1 l 1,200, 200,200, 200,1 x e"><v:fill type="tile" src="myimage.gif"/> </v:shape>
Description Attribute Color Attribute: Defines the color of a fill. Read/write. VgColor. Tag Syntax : <v: element color="expression"> Script Syntax: element.color="expression" expression=element.color Remarks: Overrides the FillColor attribute of a shape. The default value is White.ExampleThe fill color of the shape is green <v:shape id="rect01"coordorigin="0 0"coordsize="200 200"strokecolor="red"style="top:1;left:1;width:50;height:50"path="m 1,1 l 1,200, 200,200, 200,1 x e"><v:fill color="green"/> </v:shape>
Description AttributeAngle Attribute: Defines the angle of a gradient fill. Read/write. VgAngle.Tag Syntax : <v: element angle="expression">Script Syntaxelement.angle="expression"expression=element.angleRemarksThe vector of a gradient is perpendicular to the vector of the blend direction from one color to another.The default value is 0 (zero) degrees, which is a horizontal vector from left to right. Positive angles rotatethe gradient in a counter-clockwise direction.ExampleThe fill of the shape is composed of a gradient of two colors, running from blue to red at anangle of 45 degrees. Red will be in the top left corner and blue will be in the bottom rightcorner. <v:shape id="rect01"coordorigin="0 0"coordsize="200 200"strokecolor="red"style="top:1;left:1;width:50;height:50"path="m 1,1 l 1,200, 200,200, 200,1 x e"><v:fill type="gradient" color="blue" color2="red" angle="45"/></v:shape>
Description AttributeMethod Attribute: Defines the method used to generate a gradient fill. Read/write. VgSigmaType.Tag Syntax : <v: element method="expression">Script Syntax :element.method="expression" Value Descriptionexpression=element.methodRemarks: None No sigma fill.Values include: Linear Linear sigma fill. Sigma Sigma fill. Default. Any Any sigma fill. Example The shape will have a red linear gradient fill. <v:shape id="rect01" coordorigin="0 0" coordsize="200 200" strokecolor="red" style="top:1;left:1;width:50;height:50" path="m 1,1 l 1,200, 200,200, 200,1 x e"> <v:fill color="red" type="gradient" method="linear"/> </v:shape>
Contents1 What is VML2 Description background element3 Attribute4 Answer and question
Hot Tip• What is VML – Vector Markup Language (VML) is a deprecated XML language used to produce vector graphics. – VML is used by most Microsoft Office applications, such as Microsoft Word, Microsoft Visio, etc. within its HTML files, created using the Save As HTML option (plain HTML or MHT). Such files retain complete vector information, and can be reopened for editing using other Microsoft applications, such as Microsoft PowerPoint.
Background element DescriptionThis elementdescribes the fill <backgroundof the background id=nullof a page using fill="true"vector graphics fillcolor="white"fills. />
Attribute 1 2 3 Id attribute Fill Attribute FillColor Attribute Provides a Determines Defines the brushunique identifier whether the color that fills the for an element. closed path will be closed path of a filled. shape.
WHAT IS SHAPETYPE ELEMENTFor cases where a shape is to be used multiple times on a web page, VML provides the shapetype element. A shapetype is essentially a shape element which is given an id that can then be referenced within another shape element. The shape element which references the shapetype id is drawn per the attributes of the shapetype unless overidden within the shape element itself.
USING SHAPETYPEIf you wanted to draw many shapes that have the same or similar properties, it would be tedious if you had to repeatedly type the same property attributes for each shape. VML provides the <shapetype> element so that you can define a prototype of a shape. You can then use the <shape> element to instantiate many copies of shapes from the same shapetype.
3 STEPS TO DEFINE A SHAPETYPE1. Type a <shapetype> element and give it a name by specifying the id attribute.2. Describe the shapetype by using its property attributes or sub-elements.3. Instantiate a shape by typing a <shape> element, and refer the type attribute
CREATE SHAPETYPE WITH ID - Type a <shapetype> element and give it a name by specifying the id attribute.
DESCRIBE THE SHAPETYPE - Then, you alter the shapetype by setting some property attributes, such as fillcolor="red" strokecolor="blue". Or, you can use sub-elements inside the shapetype, Such as <path>, <fill>, <stroke> (we will talk about those sub-elements in later topics).
INSTANTIATE & OVERWITE - Then, you instantiate a shape from the shapetype "MyShape" by specifying type="#MyShape", as shown in the following VML representation. This shape inherits all properties from the shapetype "MyShape", and is displayed within its containing box at a size of 100 by 80.