VML (Vector Markup Language)
is an XML thesaurus originally developed by Microsoft and is now available only in IE5.0 to support VML. VML can be used to draw vector graphics in IE, so some people think that VML is in IE to implement the function of the brush. Here are some of the benefits of VML:
Based on XML standards
XML is recognized as the next generation of network markup language with infinite vitality, and VML has its own advantages, its presentation method is simple, easy to expand, and so on.
Support for high quality vector graphics display
VML supports a wide range of vector graphic features, based on describing paths by connected lines and curves. Use two basic elements in VML: Shape and group. These two elements define the entire structure of VML; shape describes a vector graphic element that the group uses to combine them so that they can be processed as a whole.
The VML specification includes a large number of elements that support many different vector graphic features. The following are predefined graphic elements for 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
Because VML uses simple text to represent an image, it can use a small number of bytes to represent a more complex image. VML is compatible with HTML, and can use VML elements like other HTML elements to display images in the client browser by declaring the VML namespace in HTML and declaring the handler function. VML tags can define most of the properties and events of DHTML, such as ID, name, title, onmouseover, and so on.
Support Interaction and animation
But the function of VML is not only drawing, but also can embed text in the graph, can realize the super chain, also can realize certain animation function through the scripting language.
VML is the abbreviation for the Vector Markup language.
Reference website
MSDN:http://msdn.microsoft.com/workshop/author/vml/shape/introduction.asp
Consortium:Http://www.w3.org/TR/NOTE-VML
First you need to add the following reference to the <HTML> tag
| xmlns:v= "urn:schemas-microsoft-com:vml" xmlns:o= "Urn:schemas-microsoft-com:office:office" > ... </HTML> |
You can ignore the second schema without the extended features that you don't use Office.
Also, you need to register VML and Microsoft Office Extensions in the STYLE element
| V\:* {behavior:url (#default #vml);} O\:* {behavior:url (#default #vml);} |
You can ignore the definition of the second style if you do not have extended features that you do not use for office.
Here are a few elements that are commonly used
1.Shape Element
Usage: <v:shape ...></v:shape>
Its Common properties:
FillColor: Image fill Color.
Label Syntax:
<v:element fillcolor= "expression" >
Scripting Syntax:
element.fillcolor= "Expression"
Expression=element.fillcolor
Path: Specifies the path of the painting
Scripting usage:
<v:shape id= "rect01"
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: Defines the coordinates of the initial point of the image with the letter m (MoveTo command), as shown in the example (1,1)
Start drawing lines with the letter L (lowercase l letters, lineto commands), draw first to (1,200), then draw to (200,200), then draw to (200,1)
Turn off lines with the letter x (Close command)
Ends with the letter e (end command)
Note: Each two digits form a coordinate
Title: Prompt text when the mouse moves to the image
Style: The style of the image
filled: Determines whether padding is required in the closed path (true/false)
Strokecolor: The color of the image path
2.Shape elements are valid child elements
TextBox: Define a text box in the image
Usage:
<v:shape>
<v:textbox>VML</v:textbox>
</v:shape>
Textpath: Sets the type path, to use this property, the Path property must be Textpathok to true, and Textpath's on property to be true
Please refer to the reference website for more information!!!
A simple example:
| 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, 1 x E" title= "Test" Strokecolor= "Yellow" > <v:fill type= ' gradient ' id= ' fill1 ' color= ' red '/> <v:textbox>VML</v:textbox> </v:shape> </BODY> </HTML> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
