`
wfdoublext
  • 浏览: 129912 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
社区版块
存档分类
最新评论

vml资料

360MicrosoftHTMLCC++ 
阅读更多

 

http://hi.baidu.com/greatmaster/blog/item/af801138930b5e26b8998fa3.html

（上一篇，下一篇）

 

 

1.line(直线)

a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/>
</body>
</html>

b.专用属性：from    起点坐标；
                    to    终点坐标
2.Oval(圆)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽400高400边框为红色填充为绿色的圆</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/>
</body>
</html>b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定

3.rect(矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个宽100高100的矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/>
</body>
</html>

b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆角矩形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/>
</body>
</html>

b.专用属性：arcsize    描述圆矩形四角的弧度值，0-0.5，默认值0.05
c.其他说明：其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个圆弧</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/>
</body>
</html>

b.专用属性：startangle    圆弧的起点缺口，取值范围-360-360，默认值-180；
                    endangle    圆弧的终点缺口，取值范围-360-360，默认值null(0)
c.其他说明：其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一个多边形</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/>
</body>
</html>
b.专用属性：points    各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点

7.curve(曲线)

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建一条曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/>
</body>
</html>

b.专用属性：from    起点
                    to       终点
                    control1    曲线的第一个曲度
                    control2    曲线的第二个曲度
c.其他说明：control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>创建任意曲线</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/>
<v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/>
<v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/>
</body>
</html>
b.专用属性：path    路径(m    起点、 l     画直线、 c    画曲线、x    曲线自动闭合、 e    结束)
                   coordsize    比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值)
                   type    引用模板的名称
9.shapetype(模板)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>模板使用示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow">
<v:Path v="m0,0 l30,-30,60,0,0,0 e"/>
</v:ShapeType>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/>
<v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/>
<v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/>
</body>
</html>
b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
10.background(背景)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>背景示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:background fillcolor="white">
<v:fill angle=50 type='gradient' color2="yellow"/>
</v:background>
</body>
</html>
11.group(容器)
a.示例：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>容器示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>

<v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100">
<v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/>
<v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/>
<v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/>
<v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/>
</v:group>
</body>
</html>
b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。

五、二级标记
二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>二级标记示例</title>
<style>
v\:* { behavior: url(#default#VML);}
</style>
</head>

<body>
<v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
</body>
</html>
例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。

.stroke边框

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
weight 1pt number 描述边框粗度
color black color 描述边框颜色
opacity 1.0 0.0-1.0 描述边框透明度
dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述边框的线条样式
filltype solid solid,tile,pattern,frame 描述如何填充边框
src null URLstring 当filltype!=solid时，指定填充边框的图像地址
imagesize auto Vector2D 当filltype!=solid时，描述图像放大倍数
imagealignshape true boolean 当filltype!=solid时，描述图像是否居中对齐
color2 null color 当filltype=pattern时，描述图像的融合背景色
startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线起点的箭头样式
endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线终点的箭头样式
startarrowwidth medium narrow,medium,wide 当startarrow!=none时，描述起点箭头的宽度
startarrowlength medium short,medium,long 当startarrow!=none时，描述起点箭头的高度
endarrowwidth medium narrow,medium,wide 当endarrow!=none时，描述起点箭头的宽度
endarrowlength medium short,medium,long 当endarrow!=none时，描述起点箭头的高度
miterlimit 8.0 number 描述边框关节位置的厚度
joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述边框参加的样式
endcap round flat,square,round 描述边框结束部分


2.fill填充
属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type solid solid,gradient,gradientradial,tile,pattern,frame 描述使用哪种填充模式
color white color 描述基本填充颜色
opacity 1.0 0.0-1.0 描述填充透明度
以下属性只有当type=gradient,gradientradial渐变填充时有效
color2 white color 描述基本二级过度颜色
colors null number% color* 沿着一个渐行度填充颜色，并以百分比分配空间。例如1:colors="30% red,50% blue"。例如2:colors="30% red,50% blue,90% purple"
angle 0 -360-360 描述渐行效果以圆周顺时旋转、倾斜
focus 0% -100%-100% 描述渐层的位置
focussize 0,0 Vector2D 描述渐层在所有者的位置分布
focusposition 0,0 Vector2D 描述渐层在所有者的倾斜度分布
method sigma none,linear,sigma,any 描述均匀分布的对比
以下属性只有当type=tile,pattern,frame背景图像填充时有效
src null URL 描述填充使用的图像地址
size auto Vector2D 描述图像放大倍数
origin auto Vector2D 描述图像的分布位置，适用于tile、pattern
position auto Vector2D 描述图像放置的起源位置，适用于tile、pattern
aspect ignore ignore,atleast,atmost 描述图像居中还是充满整个图型
alignshape true boolean 描述是否对比容器对齐图片


3.shadow阴影
属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type single single,double,emboss,perspective 描述使用哪种阴影效果
color black color 描述主要阴影颜色
obscured false boolean 暗示看穿图像如果没有在形状上填充
opacity 1.0 0.0-1.0 描述阴影透明度
offset 2pt,2pt Vector2D 描述阴影的XY偏移度
color2 gray color 当type!=single时，描述二次投影颜色
offset2 0pt,0pt Vector2D 当type!=single时，描述二次投影XY偏移度
origin 0,0 Vector2D 当filltype!=solid时，描述阴影与投影的交接度
matrix null string 当filltype!=solid时，描述变换点阵的强度

分享到：
| js 特效
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    vml资料（资料+例子供大家参考）

    VML，全称为Vector Markup Language，是一种用于在网页上描绘矢量图形的标记语言。它在HTML中嵌入，允许开发者创建出清晰、可缩放的图形，特别适合于需要精确控制图形细节的场景，如图表、流程图、地图等。VML在20...

    VML参考资料/参考文档

    VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料

    VML 学习资料，入门资料

    ### VML语言入门知识点 #### 一、VML简介与学习方法 **VML**(Vector Markup Language)是一种用于在网页上绘制矢量图形的语言，类似于SVG，但它由微软开发并主要用于Internet Explorer浏览器。VML允许开发者在HTML...

    JavaScript VML资料

    chm资料 关于js中的vml使用方法详解！自己做的

    vml 极道教程 详细的vml教程

    总之，"vml极道教程"是一份全面的学习资料，不仅涵盖VML的基本概念和技术，还涉及到其动态扩展和与其他技术的结合，对想要深入了解和使用VML的人来说非常有价值。通过学习这个教程，你可以提升自己的前端开发技能，...

    VML极道教程（含实例的学习资料）

    下面介绍一下VML的优点： 　基于XML标准 　XML是公认拥有无穷生命力的下一代网络标记语言， VML具有先天的优势，它的表示方法简单，易于扩展等等。 　支持高质量的矢量图形显示 　矢量的图形，意味着图形可以任意...

    vml使用手册_包含多种示例

    VML，全称为Vector Markup Language，是一种用于在网页上描绘矢量图形的标记语言，尤其在HTML4时代，它是创建复杂图形和...对于那些需要在旧版浏览器中提供矢量图形支持的开发者来说，这是一份非常有价值的参考资料。

    vml+javascript直接在浏览器中绘制动态曲线图实例(源码-+Think in vml +vml+极道教程)

    总的来说，这个实例和教程资源是学习如何在不支持SVG的旧版IE浏览器中进行数据可视化的宝贵资料，对于那些需要向后兼容的Web开发者来说，这是一个非常实用的技术。通过熟练掌握这些知识，你可以创建出具有吸引力的、...

    经典VML绘画源代码(基本包括所有图形的VML绘制)

    VML（Vector Markup Language）是一种基于XML的矢量图形语言，主要在Internet Explorer浏览器中使用，用于在网页上创建和展示复杂的图形。...然而，对于理解图形绘制原理和历史，VML仍然是一个有价值的参考资料。

    VML.rar_VML

    通过这些资料，你可以深入理解VML的语法、属性和方法，以及如何在实际项目中应用。同时，配合在线资源如MDN Web Docs、Stack Overflow等，可以更好地解决在学习过程中遇到的问题。 总结，虽然VML现在并非主流的矢量...

    《VML极道教程》+FlashVml(闪耀之星)3.0中英文版联合发布

    《VML极道教程》与Flash Vml（闪耀之星）3.0中英文版联合发布的资源，为我们提供了一个深入了解矢量标记语言（VML）以及与其相关的Flash Vml工具的宝贵资料。这个压缩包文件包含了关于这两个主题的详细内容，旨在...

    vml三维报表资料.rar

    【标题】"vml三维报表资料.rar"是一个压缩包文件，其中包含与VML（Vector Markup Language）技术在创建三维报表方面的应用相关的资料。VML是一种标记语言，它允许在网页上描绘矢量图形，特别是在IE浏览器中广泛支持...

    vml技术大全（中文手册，极道教程，入门教程及大量实例等）

    本资源包是针对VML技术的全面学习资料，包含中文手册、极道教程、入门指导以及大量实例，旨在帮助用户从零开始掌握这一技术。 1. **VML中文手册**：手册详细介绍了VML的基本语法和属性，包括线条、形状、填充、文本...

    学习VML必不可少的资料

    在"学习VML必不可少的资料"这个压缩包中，虽然没有具体的文件名，但我们可以假设它包含了一些关于VML的学习资源，比如教程文档、示例代码、实战项目或者VmlEditor的相关工具。VmlEditor可能是一个用于创建和编辑VML...

    js.rar_VML_js vml_js绘图

    VML（Vector Markup Language）是微软推出的一种矢量图形语言，用于在网页上绘制图形。...如果你正在处理一个需要在老版本IE上展示图形的项目，或者对历史上的Web图形技术感兴趣，那么这个资源将是一个宝贵的参考资料。

    js+vml.chm

    JavaScript（简称JS）是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，为客户端的交互性提供强大的...对于那些需要在老版本IE浏览器中创建动态矢量图形的开发者来说，这将是一份非常有价值的参考资料。

    ThinkInVML

    在"ThinkInVML"这个资料中，我们将会深入学习如何利用VML进行矢量图的开发，特别是如何在HTML环境中创建流程图和其他图形化内容。以下是一些关于VML的关键知识点： 1. **基本概念** - **VML元素**：VML的核心是...

    asp\asp.net统计图VML(asp版加asp.net版，含饼图、曲线图、柱图)

    ASP 和 ASP.NET 是两种不同的微软开发的服务器端脚本技术，用于构建...对于需要在老式IE环境中开发数据可视化的开发者来说，这是一个非常实用的学习资料。通过学习和实践，你可以提升在Web应用中实现数据可视化的能力。

    CSS+HTML+DHTML+VML网页制作

    说明 ...本手册的内容全部来自Microsoft MSDN Library，若有疑问可直接访问Microsoft MSDN Library。 由于链接众多，错误之处在所难免，希望各位用户指正。...以上资料可在http://clgigi.8u8.com上下载。

Magicbox
Global site tag (gtag.js) - Google Analytics