zoukankan      html  css  js  c++  java
  • VML :Vector Markup Language

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

      

  • 相关阅读:
    软件系统架构演变
    PL/SQL语法
    ambari安装指南
    手把手带你使用JS-SDK自定义微信分享效果
    微信公众平台无法使用支付宝收付款的解决方案
    php创建含文件夹的zip文件
    捣鼓TinyMCE 粘贴图片并上传+Django后台
    捣鼓TinyMCE粘贴图片并上传+Flask后台
    关于Java 中Integer 和Long对象 对比的陷阱(简单却容易犯的错误)
    Java东西太多,记录一些知识点
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5484685.html
Copyright © 2011-2022 走看看