Creating Basic Shapes
Line - Round - Oval - Rect - Roundrect - Polyline - Curve - Arc
In order to utilise Vector Markup Lanuguage the following must be included in the page:
- in the opening HTML tag;
<HTML xmlns:v = "urn:schemas-microsoft-com:vml">
- Style attribute;
<style>
v\:* {BEHAVIOR: url(#default#VML)}
</style>
Here are seven basic shapes you can create.
Line
<v:line from="0px,0px" to="200px,50px" strokeweight="2px" strokecolor="green"></v:line>
Line
Round
<v:oval style="position:relative;left:250px;top:0px;width:80px; height:80px" fillcolor = "red"></v:oval>
Round
Equal width and height create a circle using oval.
Oval
<v:oval style="position:relative;left:200px;top:0px;width:100px;height:150px;" fillcolor="red"></v:oval>
Oval
Rect
<v:rect style="position:relative;left:250px;top:0px;width:100px;height:75px" fillcolor="blue" strokecolor="red" strokeweight="3.5px"></v:rect>
Rectangle
Roundrect
<v:roundrect style="position:relative;left:250px;top:0px;width:100px;height:75px" arcsize="0.3" fillcolor="yellow" strokecolor="red" strokeweight="2px"></v:roundrect>
Round Rectangle
Polyline
<v:polyline strokecolor="red" strokeweight="2px" fillcolor="#aaaaaa" points="M 300,200 L 300,300,200,250,300,200 X E"></v:polyline>
Polyline
M start point (300,200).
L Draw a line from the current pen location (x = 300, y = 200) to x = 300, y = 300. Then draw a line from there to the point x = 200, y = 250.
X closes the path with a straight line from the last point 300,200 to the start point 300,200.
E stop drawing.
Curve
<v:curve from="200px,0px" to="400,0px" control1="200px,0px" control2="300px,100px" fillcolor="green" strokecolor="red" strokeweight="3px"></v:curve>
Curve
Arc
<v:arc style="width:100px;height:100px" startangle="0" endangle="90" fillcolor="#00FFFF" strokecolor="red" strokeweight="2px"></v:arc>
Arc
0 to 90
strokeweight = width of the border around the shape
strokecolor = colour of the border around the shape
fillcolor = colour of the shape
Mouse events can be included in the opening shape tags.
Link and target attributes can be included in the opening shape tags.
Some shapes are affected by the standard CSS attributes such as width & height.
Positioning can be helped by using the position attribute.