在以前老是浏览器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"> </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"> </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/)