Shape child elements
Some properties of shapes are more convenient to set with child elements than with attributes. Furthermore, using child elements allows finer control of some aspects of shapes. Table 2 lists the possible child elements of a shape. If a child element conflicts with an attribute, then the value specified by the child element is used.
Table 2
Shape Child Elements
|
Element Name
|
Purpose
|
|
extrusion
|
A three-dimensional extruded effect
|
|
fill
|
Specifies how and with what the shape is filled
|
|
formulas
|
Formulas used to calculate the path of the shape
|
|
handles
|
Handles by which the shape can be manipulated
|
|
imagedata
|
-A bitmapped picture from an external source rendered on top of the shape
|
|
path
|
Commands specifying how to draw the shape's outline
|
|
shadow
|
The shadow effect for the shape
|
|
skew
|
An angle by which to skew the shape
|
|
stroke
|
The visible outline of the shape
|
|
textbox
|
Text inside the shape
|
|
textpath
|
A path along which the text is drawn
|
Predefined shapes
Because working with paths manually isn't very convenient, VML predefines a number of common shapes with different syntax that can be more naturally specified. For instance, you could define a rectangle using a path like this:
<vml:shape style="height: 200px; width: 100px"
path="M 0,0 L 100,0, 100,200, 0,200 X E">
</vml:shape>
However it's easier to specify it by giving the coordinates of its corners, or one corner and the width and the height; indeed, VML let's you do this by using a vml:rect element instead of a vml:shape element like this:
<vml:rect style="height: 200; width: 100; top: 0; left: 0">
</vml:rect>
The rectangle is completely specified by the CSS styles. VML predefines eight shapes, all listed in Table 3.
Table 3
Predefined Shapes
|
Element
|
Shape
|
|
arc
|
-A curved line defined by the arc of a circle between two points through a specified number of degrees
|
|
curve
|
A curved line defined by a cubic Bézier curve
|
|
image
|
A bitmapped image loaded from an external source
|
|
line
|
A straight line between two points
|
|
oval
|
The largest oval that can fit in a rectangular box of specified size
|
|
polyline
|
A series of straight lines drawn between successive pairs of points
|
|
rect
|
-A rectangle oriented parallel to the coordinate axes defined by one corner and a height and a width
|
|
roundrect
|
A rectangle with rounded edges
|
Each of these child elements can have all the attributes that vml:shape has and that are shown in Table 1: fill, fillcolor, stroke, and so on. In addition, each has some unique attributes that allow its path to be specified in a more convenient way. For instance, vml:line, one of the simplest, has from and to attributes that define the endpoints of the line. The value of each of these attributes is a 2D coordinate in the local coordinate space, such as 0, 5 or 32, 10. Detailed syntax is on the Microsoft Web site at http://msdn.microsoft.com/standards/vml/.
The shapetype element
The vml:shapetype element defines a shape that can be reused multiple times, by referencing it at a later point within a document using a vml:shape element. The vml:shapetype element itself is never drawn. A vml:shape element references a vml:shapetype element using a type attribute whose value is a relative URL pointing to the id of the vml:shapetype element. The syntax of the vml:shapetype element is almost identical to the syntax of the vml:shape element except that a vml:shapetype generally does not give an explicit width and height because it is not actually drawn on the page. Instead, a coordsize attribute defines an abstract coordinate system that is mapped to the width and height of the actual shapes that reference it.
For example, Listing 2 includes a vml:shapetype element that defines a blue right triangle. It also includes three shape elements that merely reference this vml:shapetype. Thus, there are three right triangles in Figure 3, even though it's only defined once. Each of these triangles has a different size as set in the individual shape elements, even though they're all calculated from the same formulas.
Listing 2:--Multiple shape elements copy a single
shapetype
<html xmlns:vml="urn:schemas-microsoft-com:vml">
<head>
<title>Example 26-2 from the XML Bible</title>
<object id="VMLRender"
classid="CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E">
</object>
<style>
vml\:* { behavior: url(#VMLRender) }
</style>
</head>
<body>
<h1>Example 26-2 from the XML Bible</h1>
<vml:shapetype id="fred"
coordsize="500,500"
fillcolor="blue"
path="m 0,0 l 0,400, 300,400 x e">
</vml:shapetype>
<vml:shape type="#fred" style="width:50px; height:50px" />
<vml:shape type="#fred" style="width:100px; height:100px"/>
<vml:shape type="#fred" style="width:150px; height:150px"/>
<hr></hr>
Last Modified February 17, 2001<br />
Copyright 2001
<a href="http://www.macfaq.com/personal.html">
Elliotte Rusty Harold
</a>
</body>
</html>
Figure 3:-Three triangle shapes copied from \tone shapetype element.
When a vml:shape element references a vml:shapetype element, vml:shape may duplicate some of the attributes applied to the vml:shapetype element. In this case, the values associated with vml:shape override those of vml:shapetype.
The group element
The group top-level element combines shapes and other top-level elements. The group has its own local coordinate space in which its child shapes are placed. This entire collection of shapes can then be moved and positioned as a unit. The only attributes the group can have are the core attributes that a shape can have (that is, id, class, style, title, href, target, alt, coordorigin, and coordsize). For example, suppose you need a shape that is a star inside a circle. You can create it by combining an oval with a polyline in a group element like this:
<vml:group style="width: 6cm; height: 6cm"
coordorigin="0,0" coordsize="250,250">
<vml:oval style="position: absolute; top: 15; left: 15;
width: 200; height: 200"
filled="true" fillcolor="red">
</vml:oval>
<vml:polyline style="position: absolute; top: 25; left: 25;
width: 200; height: 200"
filled="true" fillcolor="blue"
points="8, 65, 72, 65, 92, 11, 112, 65, 174, 65, 122,
100, 142, 155, 92, 121, 42, 155, 60, 100">
</vml:polyline>
</vml:group>
The coordsize and coordorigin attributes define the local coordinate system of the elements contained in the group. The coordsize attribute defines the dimensions of the containing block. The coordorigin attribute defines the coordinate of the top-left corner of the containing block.
This is an abstract system, not a system based on any sort of physical units such as inches, pixels, or ems. The conversion between the local units and the global units depends on the height and the width of the group. For instance, in the above example, the group's actual height and width is 6cm by 6cm, and its coordsize is 250,250. Thus, each local unit is 0.024 cm (6 cm/250). As the height and width of the group change, the sizes of the contents of the group scale proportionately.
Inside a group, all the CSS properties used to position VML, such as left and width, are given as nondimensional numbers in the local coordinate space. In other words, unlike normal CSS properties, they do not use units, and are only pure numbers, not real lengths. All children of the group are positioned and sized according to the local coordinate system. For example, consider this group:
<vml:group style="width: 400px; height: 400px"
coordsize="100,100"
coordorigin="-50,-50">
</vml:group>
The containing block is 400 pixels wide by 400 pixels high. The coordsize property specifies that there are 100 units both horizontally and vertically within this group. Each of the local units is four pixels long. The coordinate system inside the containing block ranges from –50.0 to 50.0 along the x-axis and –50.0 to 50.0 along the y-axis with 0.0, 0.0 at the center of the rectangle. Shapes positioned outside this region will not be truncated, but they are likely to fall on top of or beneath HTML elements and other VML shapes on the page.
Summary
In this two part article, you learned about Microsoft's Vector Markup Language, an XML application for vector graphics used in Internet Explorer 5.0. In particular, you learned:
- What VML can do for Web graphics.
- The various elements and attributes associated with VML shapes, and how to
use them to create the visual images that you need.
In the second part of this two part article, you will learn how to position VML shapes using CSS properties.
About the Author
Elliotte Rusty Harold is an internationally respected writer, programmer, and educator both on
the Internet and off. He got his start writing FAQ lists for the Macintosh
newsgroups on Usenet and has since branched out into books, Web sites, and
newsletters. He's an adjunct professor of computer science at Polytechnic
University in Brooklyn, new York. His books include XML Bible, The Java
Developer's Resource, Java Network Programming, Java Secrets, JavaBeans, XML:
Extensible markup Language, and Java I/O.
IE 7
Firefox 2.0
