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
|
Once you've gone to the effort to create a shape, it may not be much effort to copy the lines of code in order to create a single new shape. But if you have to do that a lot, or if you want to change the basic shape then it can be a lot of effort to keep everything straight. The shapetype element solves the problem. It acts like a prototype for a shape which you can call over and over again, changing as few or as many of the original attributes as your chose. Basically, it let you create a shape class, just as other languages allow class definition.
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>
ShapeType ElementsFor 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.Only the referenced copies of a shapetype element are drawn - the shapetype element itself is never drawn. As shown in the example below, the shape which is to use the shapetype does so by setting its type attribute to reference the shapetype element. Since the shapetype is not drawn, its declaration does not include width and height. Those attributes are declared by the shape which uses the shapetype. In the following example, a triangle shape type is defined as follows, where each triangle is drawn from a shapetype element, and each triangle defines its own height/width. If the shape element contains attributes found within the shapetype element, then the attributes of the shape element are override those found in the shapetype element.
The code for the shapetype element example above is as follows:
<v:shapetype id="master" fillcolor="red" _
path="M 0,0 L 100,100,200,0 X E"></v:shapetype>
<v:shape type="#master" style="width:50px; height:50px"/>
<v:shape type="#master" style="width:100px; height:100px"/>
<v:shape type="#master" style="width:150px; height:150px"/>
Attributes... in work ...
|
