在以前老是浏览器IE<9在不支持SVG情况下,IE一般通过VML来绘制图形,图片,文字等

步骤:

  必须在头部添加

    <HTML xmlns:v="urn:schemas-microsoft-com:vml"> 手动添加 或者通过JS来添加

  添加样式

    v\:* {behavior:url(#default#VML);}

  注:对于IE8来说由于不支持 v:\* 所以必须根据具体的用到的元素来设置样式,还有必须手动来设置display属性来强制浏览器渲染 

  v\:rect,
  v\:Line,
  v\:oval,
  v\:PolyLine {
    behavior: url(#default#VML);
    display: inline-block
  }

  

  下面只是对IE8来看看具体的示例:

  

<!DOCTYPE html>
<HTML xmlns:v="urn:schemas-microsoft-com:vml"> <head>
<meta charset="utf-8">
<!--这部分怕冲突 只对IE8引入-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="1.css">
<![endif]-->
</head> <body> <v:polyline
id=528
style="CURSOR: pointer;"
points="928,208.5 993,108.5"
fromTo="928,108.5,993,108.5"
strokecolor="#5068ae"
strokeweight="1.2pt">
<v:stroke></v:stroke>
<DIV style="LEFT: 36px; TOP: -6px">&nbsp;</DIV>
</v:polyline> <v:polyline id=5228
style="CURSOR: pointer"
points="928,108.5 993,108.5"
fromTo="928,108.5,993,108.5"
strokecolor = "#5068ae"
strokeweight = "1.2pt">
<v:stroke></v:stroke>
<DIV style="LEFT: 36px; TOP: -6px">&nbsp;</DIV>
</v:polyline>
</body>
</html>

结果如下:

IE8中动态添加VML标签时注意地方:

  通过字符串的方式,样式不能直接拼接在字符串中,否则没有效果;只能通过document.style方式添加

   line = document.createElement("<v:line id=\"cv\" from=\"0,0\" to=\"600,0\" fillcolor=\"red\" ></v:line>");

    stroke = document.createElement("<v:stroke EndArrow=\"Diamond\"/>");

   line.appendChild(stroke);

   document.body.appendChild(line );  // 只生成不带箭头的线

参考链接推荐
  
  推荐链接 (http://www.htmlgoodies.com/beyond/xml/article.php/3473491/VML-Vector-Markup-Language.htm)
  推荐博客 (http://www.codeweblog.com/javascript-%E5%8A%A8%E6%80%81%E5%88%9B%E5%BB%BAvml%E7%9A%84%E6%96%B9%E6%B3%95/)

  

VML :Vector Markup Language的更多相关文章

  1. XML EXtensible Markup Language

    1.基础:XML设计被用来传输和存储数据:全称是EXtensible Markup Language.它的设计宗旨是传输数据,而不是显示数据.xml的标签没有被预定义,需要由用户自行定义标签.xml被 ...

  2. HTML (Hyper Text Markup Language) 常用标签

    HTML是什么?  英文全称:Hyper Text Markup Language  中文全称:超文本标记语言  网页主要由 机构  表现 行为  组成 什么是标签?    < > 里的叫 ...

  3. HTML:Hyper Text Markup Language 超文本标记语言

    1.HTML是什么? *Hyper Text Markup Language 超文本标记语言 *Hyper Text:超链接.把不同空间的资源,整合在一起,形成逻辑上的网状结构. *Markup La ...

  4. 我眼中的SAML (Security Assertion Markup Language)

    提到SAML (Security Assertion Markup Language), 很多人都会联想到单点登录SSO.那么Saml到底是什么,它跟sso到底有什么联系?这里给大家分享一下我在读完了 ...

  5. html(HyperText Markup Language)--超文本标记语言

    1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** ...

  6. XML简介——可扩展标记语言(Extensible Markup Language)

    (What) XML是什么? XML指可扩展标记语言(Extensible Markup Language) 1.  XML是一种标记语言,类似HTML. 2.  XML具有自我描述性 3.  XML ...

  7. 00HyperText Markup Language

    HyperText Markup Language HTML超文本标记语言是一种用于创建网页的标准标记语言用于显示网页内容,HTML运行在浏览器上,由浏览器来解析,您可以使用 HTML 来建立自己的 ...

  8. 00Extensible Markup Language

    Extensible Markup Language XML(Extensible Markup Language)可扩展标记语言是用来网络数据的组织结构,传输及存储.

  9. 超文本标记语言(Hyper Text Markup Language):构建网页的语言

    超文本标记语言(Hyper Text Markup Language):构建网页的语言

随机推荐

  1. indexOf()忽略大小写方法

    indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.如果没有出现,则输出-1. indexOf() 方法对大小写敏感!所以要检索字符串且忽略大小写的时候,可以先把字符串转换成全部 ...

  2. css3标签

    -moz代表firefox浏览器私有属性 -ms代表ie浏览器私有属性 -webkit代表chrome.safari私有属性 -o代表opera私有属性 border-radius:2em; 向div ...

  3. sql 根据时间获取数据

    获取当月数据 MONTH(时间字段)=MONTH(GETDATE()) and year(时间字段)=year(GETDATE()) 计算两个时间差了多少分钟 DATEDIFF(mi,'7:00',c ...

  4. android内存优化之图片压缩和缓存

    由于手机内存的限制和网络流量的费用现在,我们在加载图片的时候,必须要做好图片的压缩和缓存. 图片缓存机制一般有2种,软引用和内存缓存技术. 1.压缩图片:压缩图片要既不能模糊,也不能拉伸图片. 图片操 ...

  5. (一)CodeMirror - 基本应用

    基本引用: <link rel="stylesheet" href="../lib/codemirror.css"> <script src= ...

  6. POJ 1743 - Musical Theme 最长不重叠重复子串

    题意:    给出一列数据,问你其中重复的最长连续子串的长度    但是有要求:        1. 长度至少为 5 .        2. 两串可以不相等,但两串每个对应位置的数字相减差值固定 (即 ...

  7. sublime快捷键保存

    快捷键 功能 ctrl+shift+n 打开新Sublime ctrl+shift+w 关闭Sublime,关闭所有打开文件 ctrl+shift+t 重新打开最近关闭文件 ctrl+n 新建文件 c ...

  8. Python一路走来 面向对象1

    面向对象: 类,对象 函数放在类里,叫方法 封装 #如何调用 1. 创建对象, 类名() obj= Foo() 2. 通过对象去执行方法 obj.mail("leon@me.com" ...

  9. 一个人的旅行--hdu2066

    一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  10. Largest Rectangle in a Histogram(HDU 1506 动态规划)

    Largest Rectangle in a Histogram Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 ...