vml--基础

VML

VML是The Vector Markup Language(矢量可标记语言)的缩写。官网：https://www.vml.com/

ex:

　　<!DOCTYPE html>

　　<html xmlns:v="urn:schemas-microsoft-com:vml">　　　　//带v的遵循此规范，v可以为a，c，以v开头的标签遵循此规范
　　<head>
　　　　<meta charset="utf-8">
　　　　<style media="screen">
　　　　　　v\:* { behavior: url(#default#VML) }　　　　//转义，\为防止历览器转换成伪类
　　　　</style>
　　　　<title></title>
　　</head>
　　<body>
　　　　<v:line from="100,100" to="400,300"></v:line>　　　　//线

　　　　<v:line from="100,100" to="400,300" strokecolor="red" strokeweight="20"></v:line>　　　　//红色的粗20的线

　　　　<v:oval style="left:200px; top:200px; width:300px;height:300px; position:absolute"></v:oval>　　//椭圆

　　　　<v:rect style="left:200px; top:100px; width:400px; height:300px"></v:rect>　　　　//矩形

　　　　<v:shape style="width:1px;height:1px" coordsize="1,1" path="M 200 100 L 300 400 100 400 X"></v:shape>　　　　//图形三角形
　　</body>
　　</html>

vs svg：

　　1.vml和svg差不多　　　　　　vml支持IE5~IE7
　　2.xmlns+style
　　3.vml也有很多标签

用法：

　　line 　　线　　　　from to
　　oval 　椭圆　　 style="left,top,width,height" 　　 position:absolute
　　rect 　矩形　　　 style="left,top,width,height" 　 position:absolute

js操作：

　　<script>
　　　　window.onload=function (){
　　　　　　var oShape=document.createElement('v:shape');

　　　　　　oShape.style.width='1000px';
　　　　　　oShape.style.height='1000px';

　　　　　　oShape.path='M 100 100 L 400 100 400 300 100 300 X';

　　　　　　document.body.appendChild(oShape);
　　　　};
　　</script>

猜你喜欢