svg 和vml深入了解（路径path&shape）（转载）

最新推荐文章于 2017-12-21 15:13:00 发布
最新推荐文章于 2017-12-21 15:13:00 发布
阅读量172 收藏
点赞数
分类专栏： 绘图 文章标签： SVG VML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_18183/article/details/82471203
版权

 

目标：深入了解svg和vml的path属性
实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。
先看两个例子分别了解一下svg和vml 的path用法。
VML：
[html]  view plain copy
  1. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  2. <head>  
  3. <title>vml</title>  
  4. <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
  5. </head>  
  6. <body>  
  7. <v:shape CoordSize='2000,2000' path='M50 150C50 100 250 100 250 150C250 200 350 200 350 150'style="width:1000px;height:1000px;position:absolute" />  
  8. </body>  
  9. </html>  
SVG：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>SVG PATH</title>  
  5. </head>  
  6. <body>  
  7. <svg xmlns="http://www.w3.org/2000/svg">  
  8. <path d="M50 150C50 100 250 100 250 150C250 200 350 200 350 150"style="stroke:#660000; fill:none;"/>  
  9. </svg>  
  10. </body>  
  11. </html>  

SVG是path元素， 我们用d来定义路径，VML是shape元素，我们用path来定义路径。
下面我们分别把两种元素的参数罗列一下，然后挑重点分析。
SVG：
注：当元素名称大小写表示absolute（大写）或者relative（小写）
SVG:path
元素参数名称注释
Mx,ymove to开始的节点坐标。
Lx,y line to从当前节点到指定的lineto节点。
Hxhorizontal to可以理解为line to y坐标不变水平移动到x点。
Vy vertical lineto可以理解为line to y坐标不变垂直移动到y点。
Cx1,y1 x2,y2 x,ycurvetox1,y1,x2,y2分别是当前节点和结束节点的控制点，x,y结束节点。
Sx2,y2 x,y smooth curvetox2,y2分别是结束节点的控制点，x,y结束节点。
Qx1,y1 x,y quadratic Bezier curvetox1,y1分别是当前节点的控制点，x,y结束节点。
Tx,y smooth quadratic Bezier curveto反射，就是指前面一个控制点相反的方向的控制点x,y
Arx,ry ,
x-axis-rotation,
large-arch-flag,
sweepflag,
x,y		elliptical arch从当前点到x，y画椭圆，rx，ry为长短半轴，x-axis-rotation 偏转角度，是否是大的圆弧（0,1），
sweepflag 顺时针还是逆时针（0,1）.
Zclosepath关闭路径，将当前点和第一个点连线。

VML：
注：大小写都一样。
VML:shape
元素参数名称注释
M x,ymove to开始的节点坐标。
Lx,yline to 从当前节点到指定的lineto节点。
Cx1,y1 x2,y2 x,ycurvetox1,y1,x2,y2分别是当前节点和结束节点的控制点，x,y结束节点。
Xclosepath关闭路径，将当前点和第一个点连线。
Eendpath结束路径
Tr move to不连线，从新起一个点
Rx,y r line to通过向量x,y得到终点并连线
VX1,Y1,X2,Y2,X,Yr curve to以当前节点通过x1,y1,x2,y2向量算出当前点和结束点的控制点，通过当前点向量x,y，算出结束点
nfno fill無填色(I.E.6.0)
nsno stroke無線條(I.E.6.0)
aeX,Y,Width,Height,Start,Endangle ellipse to画椭圆,X,Y圆心，width，height圆的长短半轴，start和end是开始角度和结束角度，360度360×2^16=23592960
alX,Y,Width,Height,Start,Endangle ellipse跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
atLEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		arc to逆时针画圆，LEFT,TOP,RIGHT,BOTTOM是给定角的坐标，X1,Y1,X2,Y2是开始和结束点的位置
arLEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		arc跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
waLEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		clockwise arc to跟上面逆时针画弧一样，现在是顺时针。
wrLEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		clockwise arc跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
qxX,Yelliptical qaudrant x从当前坐标到X，Y水平方向画1/4个圆弧
qyX,Yelliptical quadrant y从当前坐标到X，Y垂直方向画1/4个圆弧
qbX,Y,X1,Y1quadratic bezier劃曲線x,y是控制点，控制当前和结束点，x1,y1是结束点（如果要重点结束可以用r 0 0 e）

我说的重点元素，是我基本上用到过的元素，但是具体情况还需要具体的分析。我更希望的是读者能自己动手一一尝试。首先两者都实现的方法肯定是比较重要的。
SVG中的M，L，C，Z 和VML中的M，L，C，X 以及名字不同功能相同的SVG的 Q 和VML的qb。
首先讲个曲线， 贝塞曲线，普及一下知识吧。
画直线有两点坐标的连线，圆有圆心半径，这些都可以用几个点定义出具体的图形，
那曲线呢？我们如果想用一系列的点能计算出任何弧度的曲线，我们需要一种算法，于是就有了贝塞曲线。
如果你用过ps，里面有一个钢笔工具就是运用的贝塞曲线。
在数学的数值分析领域中，贝塞尔曲线（Bézier曲线）是电脑图形学中相当重要的参数曲线。
贝塞尔曲线于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。
一般方程为：
其中我们用到最多的就是 二次贝塞尔曲线和 三次贝塞尔曲线。
二次贝塞尔曲线：
方程式


为建构二次贝塞尔曲线，可以中介点Q0和Q1作为由0至1的t：

  • 由P0至P1的连续点Q0，描述一条线性贝塞尔曲线。
  • 由P1至P2的连续点Q1，描述一条线性贝塞尔曲线。
  • 由Q0至Q1的连续点B（t），描述一条二次贝塞尔曲线。
例子：
SVG：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>SVG PATH</title>  
  5. </head>  
  6. <body>  
  7. <svg xmlns="http://www.w3.org/2000/svg">  
  8. <path d="M50 150Q 100 100 150 150"style="stroke:#660000; fill:none;"/>  
  9. </svg>  
  10. </body>  
  11. </html>  

VML：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  3. <head>  
  4. <title>VML SHAPE</title>  
  5. <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
  6. </head>  
  7. <body>  
  8. <v:shape CoordSize='1,1' path='M50 150qb 100 100 150 150 r 0 0 e' style="width:1;height:1;position:absolute" />  
  9. </body>  
  10. </html>  
三次贝塞尔曲线：
方程式



那么高次贝塞尔曲线：
以此类推，图形是这样的
例子：
SVG：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>SVG PATH</title>  
  5. </head>  
  6. <body>  
  7. <svg xmlns="http://www.w3.org/2000/svg">  
  8. <path d="M50 150C50 100 250 100 250 150"style="stroke:#660000; fill:none;"/>  
  9. </svg>  
  10. </body>  
  11. </html>  

VML：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html xmlns:v="urn:schemas-microsoft-com:vml">  
  3. <head>  
  4. <title>SVG PATH</title>  
  5. <style>v\: * {behavior:url(#default#vml);display:inline-block}</style>  
  6. </head>  
  7. <body>  
  8. <v:shape CoordSize='2000,2000' path='M50 150C50 100 250 100 250 150T' style="width:1000px;height:1000px;position:absolute" />  
  9. </body>  
  10. </html>  

[html]  view plain copy
  1. <pre></pre>  
  2. <pre></pre>  
  3. <pre></pre>  
  4. <pre></pre>  

说了这么多我只是想让读者有个印象到底这个贝塞曲线到底如何控制的，以及关系。大概了解就行，我们不必深究。
对应到我们这里的矢量图形，也都实现了这两种方式。
二次贝塞尔曲线 ：SVG Q，VML qb
三次贝塞尔曲线 ： SVG C，VML C

主要的上面说的很清楚了，还有一种映射的二次贝塞尔曲线，也可以叫他们平滑的二次贝塞尔曲线，我自己这么叫的，因为画出来的曲线很流畅。
SVG中的参数为T 我觉得很好用，而且需要用到Q来结合使用，虽然vml中不兼容我们可以通过封装方法来模拟。以后做兼容类的时候这些修改会很多的。
SVG：
[html]  view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>SVG PATH</title>  
  5. </head>  
  6. <body>  
  7. <svg xmlns="http://www.w3.org/2000/svg">  
  8. <path d="M50 150Q250 100 250 150T450 150"style="stroke:#660000; fill:none;"/>  
  9. </svg>  
  10. </body>  
  11. </html>  


我个人觉得还是很漂亮的，其他的就很简单了，看上面的表格试着写个例子，就清楚了，只有贝塞尔曲线需要一定的基础才能理解。到此基本的svg和vml的主要内容说完了。
[html]  view plain copy
  1. <pre></pre>  
  2. <pre></pre>  
  3. <pre></pre>  
  4. <pre></pre>  

原文地址: http://blog.csdn.net/a569171010/article/details/7572169

 

iteye_18183
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html矢量图 SVG VML 介绍
荔枝小站
05-08 9382
观看者：想了解html矢量图知识的同学 目标：了解html矢量图知识，svg和vml 兼容方案。 实现方式：代码及相关文字解释。 最近web项目需要一些流程图的支持，于是研究了一下这部分东西，觉得很好玩，分享给大家。由于内容比较多而且涉及到很多细节的东西，所以我可能得分很多篇来介绍，这节就介绍一些基础知识。 矢量图形：也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点
svg 和vml深入了解（路径path&shape）
荔枝小站
05-16 6513
观看者：有xml，javascript基础的同学 目标：深入了解svg和vml的path属性 实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。 先看两个例子分别了解一下svg和vml 的path用法。 VML： vml v\: * {behavior:url(#default#vml);display:inline-block} SV
VML、SVG、Canvas简介
jcx5083761的专栏
10-24 6429
1、VML：        VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途,VML只是被IE支持。 2、SVG：        可缩放矢量图形（Scalable Vector Graphics，SVG）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG由W
SVG和VML区别杂谈
weixin_33708432的博客
04-19 120
SVG和VML区别杂谈 很多组织一直在做这两种动态矢量语言的统一工作，SVG和VML的初衷不一样，SVG是为了集大成，VML却是为了方便Word向Web的迁移，所以相对于VML的傻瓜和方便，SVG简直就疯狂的强调其的可扩展性.... 一个简单的例子，一条直线，如果要加一个箭头，VML里面直接在stroke里面添加一个属性startarrow或者endarrow就搞定了！可以添加包括bl...
Web绘图VML与SVG
weixin_34404393的博客
04-18 168
2019独角兽企业重金招聘Python工程师标准>>> ...
利用SVG或VML在网页上实现3D的曲面效果
10-30
本文将深入探讨如何利用SVG和VML实现3D曲面效果，以及它们各自的特点和应用场景。 SVG是一种开放标准的矢量图形格式，支持动态和交互式内容，可以在任何分辨率下清晰显示，不会因为放大而失真。它通过定义点、线、...
vml.zip_VML_vml ie
09-23
它主要针对Internet Explorer浏览器，因为当时的Firefox、Chrome等现代浏览器主要支持SVG（Scalable Vector Graphics）而非VML。VML在微软的IE浏览器中得到了很好的支持，这使得它成为开发跨平台图形解决方案的一个...
VML.rar_VML_javascript_javascript 教程
09-22
使用JavaScript，我们可以动态创建`<v:shape>`等VML元素，并设置其属性，如`coordsize`、`path`等，以定义图形的形状和大小。 2. **图形绘制** 通过改变`<v:shape>`的`path`属性，可以绘制出各种形状。例如，一条...
在线VML画图工具flashvml2&2
12-04
2. **路径绘制**：`<v:shape>`元素可以结合`<v:path>`子元素来绘制复杂的路径，使用SVG类似的命令如`m`（移动到）、`l`（线到）、`c`（曲线到）等。 3. **样式应用**：VML图形可以通过CSS样式进行定制，包括填充...
VML.rar_DEMO_VML_vml API_vml包含哪些图_vml教程
最新发布
09-24
通过深入学习这个压缩包中的内容，你可以掌握如何使用VML创建矢量图形，了解其API的使用方式，以及在实际项目中如何应用和处理与现代Web技术的兼容问题。这不仅对理解Web发展历史有益，也可能在特定情况下提供解决...
VML进行地图，描述台风路线
09-02
VML精细地图，描述台风路线 <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>台风路径</title> </head> <STYLE> v\:* { BEHAVIOR: url(#default#VML) } </STYLE>
Javascript + VML + SVG 工作流设计器
09-18
Javascript + VML + SVG 工作流设计器
VML参考资料/参考文档
07-25
VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料 VML参考资料
svg和vml实现的拓扑图
09-19
可以兼容所有浏览器的网络拓扑图，可有承受500个节点的同时显示，节点的线条颜色可以根据实际情况来调整
自动选择SVG和VML的WEB页面
02-01
自动选择SVG和VML的WEB页面 在WEB上使用二维图形编程的人员现在面临者一个两难的选择，是使用SVG，还是VML？二者的功能 相似，可以满足大多数WEB二维图形应用的需求，但目前的情况是：VML只能在IE中使用，SVG被firefox，opera等浏览器的最新版本支持， 并且是W3C制定的开放标准，但目前IE不内置支持SVG，只能通过ADOBE的SVG插件显示。 对于有特定用户的应用，可能选择哪一种技术都可以，软件提供方可以要求用户安装和配置 所需的环境。但对于面向INTERNET用户的应用，例如网上地图等，这个问题就比较明显了。IE无疑是最广泛使用的浏览器，而且大多数用户在不了解网站 内容的情况下，不会选择下载并安装一个4M多的SVG插件。而在技术上，SVG无疑前景更光明，而且被其它浏览器支持，可以被非WINDOWS平台用户使 用。
VML 和 SVG 的区别
weixin_33701294的博客
12-21 177
1.VML 是一个最初由Microsoft开发的XML词表，现在也只有IE5.0以上版本对VML提供支持。使用VML可以在IE中绘制矢量图形，所以有人认为VML就是在IE中实现了画笔的功能。 2.SVG SVG是一种基于XML的开放的矢量图形描述语言。SVG是对PGML和VML的一种综合。SVG由W3C制定，是一个开放标准。IE9和其它浏览器支持。 转载于:https://www.cnblo...
客户端Web绘图VML与SVG
csnywj的专栏
03-12 406
上篇介绍的服务器端绘图，有一个很重要的缺点，就是如果图形有变化，比如要将圆移动到另外一个位置，必须回传到服务器重新绘制。页面回传会造成屏幕闪烁，使用起来很不舒服。 那么有没有不需回传的办法呢？答案就是客户端绘图。ActiveX是一种解决方案，我曾经做过一套电力操作票系统，使用ActiveX画图，可以实 现任意需要的交互效果，且无刷新。但是，其安全性是个大问题，即使使用了数字签名很多浏览器也不
Web开发中的矢量绘图(vml,svg)处理和应用
weixin_33896069的博客
10-23 287
前言 1991 年物理学家Tim Berners-Lee首次在因特网上发布了 HTML 的第一版描述规范文档。经过了 20 多年的发展，HTML 语言成为如今编程最为广泛的语言和互联网上采用最广的文档格式。虽然 HTML 发展十分迅速并具有诸多优点，但其始终不能提供一个良好的矢量绘图解决方案。很多应用为获得绚丽的动画和绘图效果，不得已在页面中嵌入大量的 Flash。这...
VML+SVG双剑合璧 打造GIS客户端应用
weixin_34232744的博客
01-07 105
1 引语 WebGIS 是Internet技术应用于GIS开发的产物。WebGIS，即互联网地理信息系统，以互联网为环境，以Web页面作为GIS软件的用户界面，把 Internet和GIS技术结合在一起，为各种地理信息应用提供GIS功能。 百度地图采用预生成地理图片结合web端矢量绘图技术，从而大大减轻服务器的负担和提高用户体验。Web端矢量绘图技术也就成了webGIS的...
SVG精髓：深入解析与应用（第2版）
在《SVG精髓（第2版）》这本书中，作者深入浅出地介绍了SVG的规范和实际应用。SVG的优势在于其图形可以无损放大，不会出现像素化，因此在网页设计、移动应用以及需要高质量图像的场景中被广泛采用。 书中的内容从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值