VML polar path tutorial (1) Introduction to VML
VML polar path tutorial (2) getting started with VML
VML polar path tutorial (3) Marking practice and line
VML polar path tutorial (4) oval circle rect rectangular
VML polar path tutorial (5) RoundRect circle shape
VML polar path tutorial (6) image
VML polar path tutorial (7) polyline multi-side
VML polar path tutorial (8) shape multiple sides. shapetype template. shape and curve
VML polar path tutorial (9) background of background
VML polar path tutorial (10) group collection container. vmlframe graphic reference
VML polar path tutorial (11) 2-level mark stroke border, shadow
VML polar path tutorial (12) VML programming finale
Oval circle rect rectangular shape VML polar path tutorialOriginal: Mu Yuanhua1: oval circle and rect rectangular shape
The oval and rect of VML can draw circles and rectangles respectively. Because the two labels have the same compiling method, principle, and attributes, so I put them together to talk about the 3D output instances of oval and rect <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML );} </STYLE> <BODY>
<V: oval style = "POSITION: absolute; Z-INDEX: 1; LEFT: 200px; TOP: 150px; width: 100; height: 100;" fillcolor = "yellow"/>
<V: rect style = "POSITION: absolute; Z-INDEX: 1; LEFT: 320px; TOP: 150px; width: 100; height: 100;"/>
<V: rect style = "POSITION: absolute; Z-INDEX: 2; LEFT: 260px; TOP: 230px; width: 100; height: 50;" strokeweight = "2px"/>
<V: oval style = "POSITION: absolute; Z-INDEX: 3; LEFT: 290px; TOP: 250px; width: 50; height: 100; "fillcolor =" red "stroked =" f "/>
As shown in the example, oval and rect have no proprietary attributes except the common attributes of VML images. POSITION: absolute of CSS, Which is output on webpage in Vector3D form. z-index:; defines 3D height, left:; top :; the positions on the left and top of the webpage, width: 100; height: 50 are defined respectively. The width and height of the image are described as PX and 50 PX respectively. Fillcolor, strokeweight, and stroked control the background color, Border width, and border. The "f" value of stroked = "f" represents the short form of "false" of the boolean variable type, indicating that no border is used, otherwise, if it is stroked = "t" or stroked = "true", the image has a border. True is the default value of the image, indicating that the border is used.
2D output instance of oval and rect <HTML xmlns: v> <STYLE> v/: * {behavior: url (# default # VML) ;}</STYLE> <BODY>
<V: oval style = "width: 100; height: 100;" fillcolor = "yellow"/>
<V: rect style = "width: 100; height: 100;"/> <p>
<V: rect style = "width: 100; height: 50;" strokeweight = "2px"/> <br>
<V: oval style = "width: 50; height: 100;" fillcolor = "red" stroked = "f"/> <br>
<Table border = 1> <tr> <td colspan = 2 align = center> HTML table </td> </tr>
<Tr>
<Td> <v: oval style = "width: 100; height: 100;" fillcolor = "red" stroked = "f"/> </td>
<Td> <v: oval style = "width: 100; height: 100;" filled = "false" strokecolor = 'blue'> </v: oval> </td>
</Tr>
</Table>
From the example, it is not difficult to see that VML is formatted and output in the same order as the traditional HTML Tag. When it comes to HTML line feed tags such as <p> <br>, it will start with another line. In addition, VML images can be nested in the HTML Tag created container (in this example, the container is a table. Because no POSITION: absolute; is defined for a VML image, it is output in the default 2D format as HTML.
It is not difficult to see how compatible VML and HTML are. However, after all, the VML vector2d design has a narrow application scope and can only serve as a supporting role of HTML. This section only provides a VML vector2d demonstration, so we will focus on the graphic design of VML vector3d in the future. You may not be able to see the highlights of the VML vector3d graphic design and how to apply it, but now you are only learning VML tagging and in-depth. When you have learned the basic knowledge of VML tagging, I will teach you how to make practical use of it.
Blog Source: http://www.cnblogs.com/GeneralXU/archive/2007/05/29/763208.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
