初识VML

初识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>
    
发布了3 篇原创文章 · 获赞 0 · 访问量 1066
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览