Introduction
Overview
History
Advice
Books
Tutorials
Shapes
Summary
rect
roundrect
line
polyline
curve
arc
oval
image
shape
Special Topics
group
shapetype
positioning
animation
stylesheets
Community
Web Sites
Mailing Lists
USENET
Vendors
News
|
The ability to create graphics is great, but for animation you need to be able to manipulate several shapes at one time. For this, VML provides the group element, which can contain any of the VML shapes (pre-define, shape, or shapetype).
Before You StartBefore you can use VML within MSIE, there are two lines of code which must be added to your web page. First, the normal <HTML> tag should be replaced with the following:
<html xmlns:v="urn:schemas-microsoft-com:vml">
Also, the following line must be placed in the <HEAD> section of the web page:
<style> v\:* { behavior: url(#default#VML); }</style >
These two tags enable MSIE to recognize and render VML tags, such as the simple rectangle VML tags we've seen so far. With these two lines entered, the core HTML code will look like:
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style> v\:* { behavior: url(#default#VML); }</style >
</head>
<body>
</body>
</html>
Groups/ChildrenVML provides the group element which can allow the web page to treat multiple shape elements as through they were a single element. A group will have its own local coordinate system and any child element coordinates will be in terms of the parent (group) coordinates. A group element can have a limited set of attributes - id, class, style, title, href, target, alt, coordorigin, and coordsize.For example, to create a oval in a rectangle you can create a group element that contains both an oval and a rectangle.
The VML code that creates this group is as follows:
<v:group style="width:200px;height:200px" coordorigin="0,0" _
coordsize="400,400">
<v:rect style="position:absolute;top:0;left:0;width:200; _
height:200" fillcolor="red"></v:rect>
<v:oval style="position:absolute;top:0;left:0;width:200; _
height:200" fillcolor="blue"></v:oval>
</v:group>
The group is defined by a 200x200 pixel space on the web page, with abstract dimension
of 400x400 and where the 0,0 point is at the top/left of the group container.
Note that elements inside the group use nondimensional numbers for top/left/width/height dimensions. All children of the group are positioned and sized according to the local coordinate system. A group element (shape) whose coordinates extend outside the group boundary will not be truncated at the boundary of the group container. Attributes... in work ...
|
