VML(Vector Markup Language) is an application of Extensible Markup Language (XML) 1.0 which defines a format for the encoding of vector information together with additional markup to describe how that information may be displayed and edited.
例子：使用VML与鼠标绘图：
online drawing <SCRIPT LANGUAGE="JavaScript"> var x,y,a,b; function drawline(fromX,fromY,toX,toY){ var strElement="<v:Line id='line_"+fromX+"_"+fromY+"_"+toX+"_"+toY+"' from='"+ fromX +","+ fromY +"' to='"+ toX +","+ toY +"' strokecolor='red'></v:Line>"; var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
} function draw(){ if(x==undefined&&b==undefined){x=window.event.x;y=window.event.y;returnfalse;}
a=window.event.x;b=window.event.y;
drawline(x,y,a,b)
x=a;y=b;
} function draws(){ if(x==undefined&&b==undefined){returnfalse;} if(x==window.event.x&&b==window.event.y){returnfalse;} if(document.getElementById("TempLine")){document.getElementById("TempLine").outerHTML=""} var strElement="<v:Line id='TempLine' from='"+ x +","+ y +"' to='"+ window.event.x +","+ window.event.y +"' strokecolor='red'></v:Line>"; var newPoint = document.createElement(strElement);
document.getElementById("map").appendChild(newPoint);
} </SCRIPT> <html xmlns:v="urn:schemas-microsoft-com:vml"> <HEAD> <META http-equiv="Content-Type" content="text/html;Charset=gb2312"> <title>vml example</title> <STYLE>
v\:*{behavior:url(#default#VML);}/*define V as VML variable*/ </STYLE> </HEAD> <BODY> <table border="1" align="center"> <tr> <td><div id="map" style="width:600px;height:500px;background-color:#cccccc;position:relative;" onmousedown="draw();" onmousemove="draws()"></div></td> </tr> </table> </body> </html>
VML作为一种XML的扩展，还在数据处理上很有用途，这里还有个例子：
例子：VML+XML绘制树型图表(Create a Tree Graph by VML+XML)
code is pick from internet, connect me if you are the author, Thanks.
Xml2Vml.prototype.RecursiveRender =function(xmlNode){ var allChild = xmlNode.childNodes; var xl = xmlNode.getAttribute("LeftX"); var xr = xmlNode.getAttribute("RightX"); var x = (parseInt(xl)+parseInt(xr))/2; var y = xmlNode.getAttribute("PosY"); var str = xmlNode.tagName;
To view these charts you will need a VML enabled browser; this means IE5 or above with the VML component installed. Please don't be too annoyed if this page looks a complete mess in Firefox or Opera - VML is a Microsoft-specific format and will never be supported by standards-aware browsers.
2. SVG可扩展矢量图形
W3C网站对SVG的介绍：
SVG(Scalable Vector Graphics ) is a language for describing two-dimensional graphics and graphical applications in XML. SVG 1.1 is a W3C Recommendation and forms the core of the current SVG developments. SVG Tiny 1.2 is the specification currently being developed as the core of the SVG 1.2 language (comments welcome). The SVG Mobile Profiles: SVG Basic and SVG Tiny are targeted to resource-limited devices and are part of the 3GPP platform for third generation mobile phones. SVG Print is a set of guidelines to produce final-form documents in XML suitable for archiving and printing. Read more about SVG.
请使用FF或Safari观看 <html> <head> <title>A canvas fillRect, strokeRect and clearRect example</title> <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/"> <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org"> <script type="text/javascript"> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported if (canvas.getContext){
// use getContext to use the canvas for drawing var ctx = canvas.getContext('2d');
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
} </script> <style type="text/css">
body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc;}
canvas { border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px;}
pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0;} </style> </head>
<body onload="drawShape();"> <h1>An example of fillRect, clearRect and strokeRect</h1> <div> <canvas id="tutorial" width="150" height="150"></canvas> <pre>
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('tutorial');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
online drawing
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述