XML vector graph: the virtual coordinate system defined by the viewbox of SVG and the coordsize of VML

SVG: viewbox is the virtual coordinate system of SVG, which is much simpler than VML. After the viewbox attribute is added to the SVG element of the root node, the size and position of each Graphic Element under SVG are the coordinates limited by viewbox, rather than the actual coordinates of the page. For example: <SVG width = "100px" Height = "100px" viewbox = "0 0 300 300"> <G> <rect x = "5" Y = "15" width = "200 "Height =" 200 "/> </G> </SVG> in the x svg area, put a x square block. It cannot be properly displayed and will be removed. However, because the viewbox attribute is added, the SVG area displays a complete rect. It can be understood that a new coordinate system is added to SVG, and SVG is divided into X parts according to the above example. The rect occupies X parts instead of pixels, and the actual image is scaled or stretched. VML: coordsize and coordorigin set the Virtual Coordinate System of VML, which is generally placed in the V: group element and often used in V: shape. The previous one determines how many parts the actual pixel region is divided into, and the last one determines the position of the origin. For example: <v: group style = "position: relative; width: 200px; Height: 200px;" coordsize = "100,1000"> <v: rect style = "width: 20px; height: 500px "fillcolor =" #000000 "> </V: group> A 40 x PX Black Block appears in the 200x200px area because of the appearance of coordsize, IE ignores the PX Unit, and the rect is still divided by coordsize. By default, VML uses the (0, 0) origin on the top left. In the preceding example, coordorigin is added. You can specify the origin and the location of the Black Block will also change.