• 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/)

      

  • 相关阅读:
    从目标检测到图像分割简要发展史
    用卷积神经网络和自注意力机制实现QANet(问答网络)
    C# 监测每个方法的执行次数和占用时间(测试5)
    C# list常用的几个操作 改变list中某个元素的值 替换某一段数据
    C# 监测每个方法的执行次数和占用时间(测试4)
    生活 对最近工作 和 生活 感悟
    Cesium 加载天地图
    其它 开发常用工具
    PowerDesigner 画流程图
    RookeyFrame bin 目录
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5484685.html
Copyright © 2020-2023  润新知