VML(Vector Markup Language)
It is an XML vocabulary originally developed by Microsoft, and now only IE5.0 or above versions provide support for VML. Use VML to draw vector graphics in IE, so some people think that VML implements the function of brushes in IE. Here are the advantages of VML:
Based on XML standards
XML is the next generation network markup language recognized as having infinite vitality. VML has inherent advantages, its representation method is simple, easy to expand, etc.
Supports high-quality vector graphics display
VML supports a wide range of vector graphics features, which are based on paths described by connected straight lines and curves. Use two basic elements in VML: shape and group. These two elements define the entire structure of the VML; shape describes a vector graphic element, and the group uses to combine these graphic shapes so that they can be processed as a whole.
The VML specification includes a large number of elements that support a variety of different vector graphics features. Here are the predefined graphical elements of VML:
l Shape
l Path
l Line
l Polyline
l Curve
l Rect
l Roundrect
l Oval
l Arc
l Group
Images made of text and can be integrated into HTML
Since VML uses simple text to represent images, few bytes can be used to represent more complex images. VML is compatible with HTML. By declaring the VML namespace and declaring processing functions in HTML, you can use VML elements like other HTML elements to display images in the client browser. Most DHTML properties and events can be defined in VML tags, such as id, name, title, onmouseover, etc.
Supports interaction and animation
But VML's function is not just drawing, it can also embed text in the graphics, implement hyperlinks, and implement certain animation functions through scripting language.
VML is the abbreviation of The Vector Markup Language.
Reference website
MSDN：/workshop/author/vml/shape/
W3C：http:///TR/NOTE-VML
First, you need to add the following quote to the <HTML> tag
| <HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> ... </HTML> |
If you don't have the extension function of OFFICE, you can ignore the second schema.
At the same time, you need to register VML and Microsoft Office Extensions in the STYLE element
| v\:* { behavior: url(#default#VML); } o\:* { behavior: url(#default#VML); } |
If you do not use OFFICE extensions, you can ignore the definition of the second style.
Here are some commonly used elements
element
Usage: <v:shape ...></v:shape>
Its common properties:
FillColor: Image fill color.
Tag syntax:
<v:element fillcolor="expression">
Script syntax:
="expression"
expression=
Path:Specify the path to the painting
Script usage:
<v:shape
fillcolor="red" strokecolor="red"
coordorigin="0 0" coordsize="200 200"
style="position:relative;top:1;left:1;width:20;height:20"
path="m 1,1 l 1,200, 200,200, 200,1 x e">
</v:shape>
Description: Use the letter m (moveto command) to define the coordinates of the initial point of the image, in the example (1,1)
Use the letter l (lowercase L letter, lineto command), first draw to (1,200), then draw to (200,200), then draw to (200,1)
Close lines with letter x (close command)
End with the letter e (end command)
Note: Each two numbers form a coordinate
Title: Prompt text when the mouse moves to the image
Style:The style of the image
Filled: Determine whether fill is required in the closed path (True/False)
StrokeColor:The color of the image path
Element valid child elements
TextBox:Define a text box in the image
usage:
<v:shape>
<v:textbox>VML</v:textbox>
</v:shape>
TextPath: Set the text path. To use this property, the TextPathOK of the path property must be true; and the TextPath on property must be true
For detailed instructions, please visit the reference website for review! ! !
Simple example:
| <HTML xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> <HEAD> <STYLE> v\:* { behavior: url(#default#VML);} o\:* { behavior: url(#default#VML);} </STYLE> <TITLE>VML Sample</TITLE> </HEAD> <BODY> <v:shape fillcolor="green" style="position:relative;top:1;left:1;width:200;height:200" path = "m 1,1 l 1,250, 250,500, 500,500, 500,250, 250, 1 x e" title="test" strokeColor="yellow"> <v:fill type='gradient' id='fill1' color='red'/> <v:textbox>VML</v:textbox> </v:shape> </BODY> </HTML> |