初识VML

最新推荐文章于 2024-09-16 06:30:00 发布

唐卡豆子

最新推荐文章于 2024-09-16 06:30:00 发布

阅读量376

点赞数 1

分类专栏：图形界面文章标签：前端图形 VML

本文链接：https://blog.csdn.net/chanel_zhy/article/details/78791262

版权

图形界面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

初识VML

准备使用VML前：

1.加个xmlns
<html xmlns:v="urn:schemas-microsoft-com:vml">
2.加个样式
<style> v\:* { behavior: url(#default#VML); position:absolute } </style>

基本图形

line 线条

<v:line from='100,100' to='400,300' strokeColor='red' strokeWeight='20'></v:line>
属性样式
from : 起点坐标
to : 终点坐标
strokeColor: 线条颜色
strokeWeight : 线条宽度

oval 椭圆

<v:oval style='left:100px;top:100px;width:400px;height:400px;display:block;'></v:oval>
<v:oval style='left:100px;top:100px;width:400px;height:400px;position:absolute;'></v:oval>
自定义标签默认是行内标签，需要添加 display:block;
使用position:absolute;定位显示图形，则可省去定义display:block;

rect 矩形

<v:rect style='left:100px;top:100px;width:400px;height:400px;display:block;'></v:rect>
<v:rect style='left:100px;top:100px;width:400px;height:400px;position:absolute;'></v:rect>
用法和oval类似

shape

<v:shape style='width:1000px;height:1000px;' coordsize='1000,1000' path="M 200,100 L 100,400 300,400 X"></v:shape>

VML中使用的坐标并不是Document的坐标
coordSize='coordSizeX, coordSizeY'; 定义坐标 
style='width:coordSizeX px; height:coordSizeY px;'  
style里的width height 和coordSize里的值对应，才能显示图形正常样式
fillColor : 填充颜色
path 属性：
M x,y 画笔起点位置
L (x,y)+ 画以一条线 也可连续多个点画线
X 结束

demo

<!DOCTYPE html>
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
  v:* { behavior: url(#default#VML); position:absolute;}
</style>
</head>
<body>
<v:shape style='width:1px;height:1px;' coordsize='1,1' path="M 200,100 L 100,400 300,400 X" fillColor='red';></v:shape>
</body>
</html>