`

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

SVGVML 
阅读更多

 

目标：深入了解svg和vml的path属性
实现方式：代码及相关文字解释。希望能一步步写完代码当你看完也就掌握了。
先看两个例子分别了解一下svg和vml 的path用法。
VML：
[html] view plaincopy
  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 plaincopy
  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
元素 参数 名称 注释
M x,y move to 开始的节点坐标。
L x,y  line to 从当前节点到指定的lineto节点。
H x horizontal to 可以理解为line to y坐标不变水平移动到x点。
V y  vertical lineto 可以理解为line to y坐标不变垂直移动到y点。
C x1,y1 x2,y2 x,y curveto x1,y1,x2,y2分别是当前节点和结束节点的控制点，x,y结束节点。
S x2,y2 x,y smooth curveto x2,y2分别是结束节点的控制点，x,y结束节点。
Q x1,y1 x,y quadratic Bezier curveto x1,y1分别是当前节点的控制点，x,y结束节点。
T x,y smooth quadratic Bezier curveto 反射，就是指前面一个控制点相反的方向的控制点x,y
A rx,ry ,
x-axis-rotation,
large-arch-flag,
sweepflag,
x,y		 elliptical arch 从当前点到x，y画椭圆，rx，ry为长短半轴，x-axis-rotation 偏转角度，是否是大的圆弧（0,1），
sweepflag 顺时针还是逆时针（0,1）.
Z closepath 关闭路径，将当前点和第一个点连线。

VML：
注：大小写都一样。
VML:shape 元素 参数 名称 注释
M  x,y move to 开始的节点坐标。
L x,y line to  从当前节点到指定的lineto节点。
C x1,y1 x2,y2 x,y curveto x1,y1,x2,y2分别是当前节点和结束节点的控制点，x,y结束节点。
X closepath 关闭路径，将当前点和第一个点连线。
E endpath 结束路径
T r move to 不连线，从新起一个点
R x,y r line to 通过向量x,y得到终点并连线
V X1,Y1,X2,Y2,X,Y r curve to 以当前节点通过x1,y1,x2,y2向量算出当前点和结束点的控制点，通过当前点向量x,y，算出结束点
nf no fill 無填色(I.E.6.0)
ns no stroke 無線條(I.E.6.0)
ae X,Y,Width,Height,Start,End angle ellipse to 画椭圆,X,Y圆心，width，height圆的长短半轴，start和end是开始角度和结束角度，360度360×2^16=23592960
al X,Y,Width,Height,Start,End angle ellipse 跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
at LEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		 arc to 逆时针画圆，LEFT,TOP,RIGHT,BOTTOM是给定角的坐标，X1,Y1,X2,Y2是开始和结束点的位置
ar LEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		 arc 跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
wa LEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		 clockwise arc to 跟上面逆时针画弧一样，现在是顺时针。
wr LEFT,TOP,RIGHT,BOTTOM,
X1,Y1,X2,Y2		 clockwise arc 跟上面一样，只是如果path中前面有M坐标的画不会影响圆，圆会从新开始画。上面的如果有M坐标，会有一条连线
qx X,Y elliptical qaudrant x 从当前坐标到X，Y水平方向画1/4个圆弧
qy X,Y elliptical quadrant y 从当前坐标到X，Y垂直方向画1/4个圆弧
qb X,Y,X1,Y1 quadratic 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 plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  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 plaincopy
  1. <pre></pre>  
  2. <pre></pre>  
  3. <pre></pre>  
  4. <pre></pre>  

 

分享到：
| SUBLIME TEXT 2 设置文件详解
评论
发表评论

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

相关推荐

    利用SVG或VML在网页上实现3D的曲面效果

    本文将深入探讨如何利用SVG和VML实现3D曲面效果，以及它们各自的特点和应用场景。 SVG是一种开放标准的矢量图形格式，支持动态和交互式内容，可以在任何分辨率下清晰显示，不会因为放大而失真。它通过定义点、线、...

    在线VML画图工具flashvml2&2

    2. **路径绘制**：`&lt;v:shape&gt;`元素可以结合`&lt;v:path&gt;`子元素来绘制复杂的路径，使用SVG类似的命令如`m`（移动到）、`l`（线到）、`c`（曲线到）等。 3. **样式应用**：VML图形可以通过CSS样式进行定制，包括填充...

    vml网页式简易教程

    VML，全称为Vector Markup Language，是一种用于在Web页面上绘制矢量图形的标记语言。它允许开发者使用XML语法来创建、...虽然SVG已成为主流，但了解VML的历史和技术原理，对于深入理解和应用矢量图形仍然大有裨益。

    JS和VML操作教程

    在教程中，你会学到如何使用VML元素（如shape、path等）来绘制图形，以及如何结合JS动态改变这些元素的属性，实现交互式图表。 总结来说，"JS和VML操作教程"涵盖了以下关键知识点： 1. JavaScript基础，包括DOM操作...

    vml 极道教程 详细的vml教程

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

    VML语言学习画图，可以详细的学习

    **VML（Vector Markup Language）**...通过学习这些材料，你可以深入了解VML的工作原理，掌握如何使用VML进行图形绘制和交互设计。然而，对于新的项目，最好转向使用SVG，以确保更广泛的浏览器兼容性和未来的可维护性。

    VML图像画版

    `shape`元素接受`path`属性，其中包含描述形状路径的数据。 2. ****: 用于绘制直线，有开始点和结束点。 3. ****: 创建矩形，可以通过设置`width`和`height`属性定义大小，`fill`和`stroke`属性控制填充色和边框。 4...

    JS和VML画曲线图

    尽管现代浏览器通常使用SVG，但针对仍然使用旧版IE的用户，了解如何用VML绘制图形仍然是有价值的。 首先，我们来理解曲线图的基本原理。曲线图是一种图表类型，用于表示数据随时间或其他连续变量的变化。在...

    VML中文参考手册解析

    2. `Path` - 定义由直线和曲线组成的路径 3. `Line` - 直线 4. `Polyline` - 多边形线 5. `Curve` - 曲线 6. `Rect` - 矩形 7. `Roundrect` - 圆角矩形 8. `Oval` - 椭圆 9. `Arc` - 弧形 10. `Group` - 组合图形 ...

    VmL 参考文档 很好得学习文档

    通过深入研究这些文档，你可以更全面地了解Vml的工作原理，同时也可以学习到如何在不支持现代图形标准的环境中创建和管理图形内容。不过，随着技术的进步，掌握SVG和其他现代Web技术将会更有助于你在当前的Web开发...

    VML极道教程(IE打开)

    3. **路径绘制**：`&lt;v:shape&gt;`元素的`path`属性可以定义图形的路径，采用类似SVG的指令，如`M`（移动）、`L`（直线）、`C`（三次贝塞尔曲线）等。 4. **组合图形**：通过`group`元素（`&lt;v:group&gt;`），可以将多个...

    vml网页画图经典教材

    总的来说，这本教材可能涵盖了VML的基本语法、图形绘制技巧、兼容性处理策略等内容，是一份了解和学习VML技术的宝贵资源。通过深入学习，你可以掌握在没有现代图形标准如SVG的情况下，如何在网页上实现高质量的图形...

    vml基础教程好东西

    通过逐一学习和实践这些步骤，你可以深入了解VML的使用方法。 总之，VML是一个强大的工具，尤其是在需要在网页中创建高质量矢量图形时。结合JavaScript的面向对象特性，你可以创建出动态、交互式的图形界面。不过...

    VML.rar_DEMO_VML_vml API_vml包含哪些图_vml教程

    通过深入学习这个压缩包中的内容，你可以掌握如何使用VML创建矢量图形，了解其API的使用方式，以及在实际项目中如何应用和处理与现代Web技术的兼容问题。这不仅对理解Web发展历史有益，也可能在特定情况下提供解决...

    vml技术相关详细文档，介绍的vml的相关函数的应用和介绍

    - `Shape`对象的属性可以内联定义或以子元素的形式分开定义，如`StrokeColor`和`Path`，这使得代码更清晰易读。 3. **VML语法** - VML遵循XML规范，标签不区分大小写，且True和False可以缩写为t和f。 - `Shape`...

    VML学习教程

    3. **路径绘制**：使用`&lt;vml:shape&gt;`元素配合`path`属性可以绘制复杂路径，`d`属性内包含一系列指令，如`M`（移动到）、`L`（直线到）、`C`（三次贝塞尔曲线）等。 **二、VML语法** 1. **声明VML**：在HTML文档中...

    VML的最全的例子，功能很全

    在这个例子中，`&lt;vml:shape&gt;`定义了一个形状，`&lt;vml:stroke&gt;`定义了边框，`&lt;vml:fill&gt;`定义了填充，而`&lt;vml:path&gt;`则指定了图形的路径。 **VML的图形元素** 1. **形状（Shapes）**：包括矩形（`&lt;vml:rect&gt;`）、...

    VML极道教程

    沐缘华编写的《VML极道教程》是一本专注于介绍VML技术的专业教程，旨在帮助读者深入理解和掌握这一技术。 1. **VML基础** VML是一种基于XML的语言，它可以精确地描述图形元素，如线条、曲线、形状和文本，且这些...

    vml柱状图 vml html jquery

    属性包括`id`、`style`、`coordsize`、`path`等，其中`path`用于定义图形的路径，`fillcolor`和`strokecolor`分别设置填充色和边框色。 2. **创建柱状图**： 首先，你需要在HTML文档中包含必要的VML命名空间：`...

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

    如今，尽管VML在现代网页开发中的应用已经非常有限，但了解其基本概念和语法仍然是有益的，尤其是在处理旧项目或与旧版IE兼容时。 VML的基本结构类似于XML，它使用标签来定义图形元素。例如，创建一个红色的矩形...

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