html中svg定义的图形是什么格式,HTML5 svg

　　基本形状SVG提供了很多基本的形状，这些元素可以直接使用，比canvas好多了。废话不多说，只看例子，这个最直接：复制代码如下：

　　svg宽度=200 高度=250

　　rect x= 10 y= 10 width= 30 height= 30 stroke= black fill= transparent stroke-width= 5 /

　　rect x= 60 y= 10 rx= 10 ry= 10 width= 30 height= 30 stroke= black fill= transparent stroke-width= 5 /

　　circle CX= 25 cy= 75 r= 20 stroke= red fill= transparent stroke-width= 5 /

　　椭圆CX= 75 cy= 75 rx= 20 ry= 5 stroke= red fill= transparent stroke-width= 5 /

　　线条x1=10 x2=50 y1=110 y2=150 笔画=橙色填充=透明笔画宽度=5/

　　折线点= 60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145

　　stroke=橙色 fill=透明 stroke-width=5/

　　多边形点= 50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180

　　stroke=绿色 fill=透明 stroke-width=5/

　　path d=M20，230 Q40，205 50，230 T90，230 fill= none stroke= blue stroke-width= 5 /

　　/svg

　　该HTML中显示的结果如下：

　　这个示例绘制了许多形状：普通矩形、圆角矩形、圆形、椭圆形、直线、折线、多边形和路径。这些是基本的图形元素。虽然画一个图有很多方法，比如矩形可以用rect或者path来实现，但是我们还是要用尽量保持SVG的内容短小精悍，易于阅读。

　　下面是对每种形状的说明(这里只介绍控制图形形状和位置的基本属性，填充等属性以后再总结)。

　　矩形 - rect元素此元素有6个属性控制其位置和形状，即：

　　x:矩形左上角坐标(用户坐标系)的x值。

　　Y:矩形左上角坐标(用户坐标系)的Y值。

　　宽度：矩形的宽度。

　　Height:矩形的高度。

　　Rx:达到圆角效果时，圆角沿X轴的半径。

　　Ry:达到圆角效果时，圆角沿Y轴的半径。

　　比如上面的例子，实现了圆角效果，你也可以通过设置Rx和RY为不同的值来实现椭圆角效果。

　　圆 - circle元素这个元素的属性很简单，主要定义圆的圆心和半径：

　　r:圆的半径。

　　Cx:中心坐标的X值。

　　Cy:中心坐标的y值。

　　椭圆 - ellipse元素这是一个更通用的round元素。您可以分别控制半长轴和半短轴的长度，以实现不同的椭圆。很容易认为，当两个半长轴相等时，就是正圆。

　　Rx:半长轴(x半径)。

　　Ry:半短轴(y半径)。

　　Cx:中心坐标的X值。

　　Cy:中心坐标的y值。

　　直线 - line元素直线需要定义其起点和终点：

　　X1:起点的x坐标。

　　Y1:起点的Y坐标。

　　X2:终点的x坐标。

　　Y2:终点的Y坐标。

　　折线 - polyline元素折线主要是定义每条线段的终点，所以只需要一组点作为参数：

　　点：由空格、逗号、换行符等分隔的一系列点。每个点必须有2个数字：X值和Y值。所以下面三点(0，0)，(1，1)，(2，2)可以写成：‘0 0，1 1，2 2’。

　　多边形 - polygon元素此元素比折线元素多一步，将最后一个点与第一个点连接起来，形成一个封闭的图形。参数是一样的。

　　点：由空格、逗号、换行符等分隔的一系列点。每个点必须有2个数字：X值和Y值。所以下面三点(0，0)，(1，1)，(2，2)可以写成：‘0 0，1 1，2 2’。

　　路径 - path元素这是最万能最强大的元素；有了这个元素，你可以实现任何其他形状，不仅包括上面的基本形状，还包括像贝塞尔曲线这样的复杂形状。此外，平滑过渡线段可以通过使用路径来实现。虽然使用折线也可以达到效果，但是需要提供的点比较多，放大效果不好。该元素仅用一个参数控制位置和形状：

　　d:结合一系列绘图指令和绘图参数(点)。

　　绘图指令分为绝对坐标指令和相对坐标指令。这两个指令中使用的字母是相同的，即大小写不同。绝对指令用大写字母，坐标也是绝对坐标。指令使用相应的小写字母，点的坐标都表示偏移量。

　　绝对坐标绘制指令这组指令的参数代表绝对坐标。假设画笔的当前位置为(x0，y0)，以下绝对坐标指令代表以下含义：

　　参数说明M x y移动画笔到点(x，y) L x y画笔从当前点到点绘制线段(x，y) H x画笔从当前点到点绘制水平线段(x，y0) V y画笔从当前点到点绘制垂直线段(x0，Y) a rx ry x轴-旋转大圆弧-标志sweep-标志x y画笔从当前点到点绘制圆弧(x，y) c x1 y1，x2y2， 而x y brush从当前点到点绘制三次贝塞尔曲线(X，y) S x2 y2，X特殊版三次贝塞尔曲线(省略第一个控制点)QX1Y1，x y绘制二次贝塞尔曲线到点(X，y) T x y特殊版二次贝塞尔曲线(省略控制点)Z绘制不带参数的封闭图形，如果D属性没有指定Z命令，绘制线段而不是封闭图形。

　　移动画笔指令M，画直线指令：L，H，V，关闭指令Z比较简单；下面重点讲几个画曲线的指令。绘制圆弧指令：A rx ry x-axis-rotation large-arc-flag sweep-flag x y用圆弧连接两点比较复杂，情况很多，所以这个命令有七个参数，分别控制曲线的各个属性。解释以下数值的含义：

　　Rx，ry是圆弧的半长轴和半短轴的长度。

　　X轴旋转是这个圆弧的X轴与水平方向的夹角，即X轴逆时针旋转的角度，负数代表顺时针旋转的角度。

　　大角度圆弧标志为1，小角度圆弧标志为0。

　　Sweep-flag为1，表示从起点到终点的圆弧是顺时针绕中心，为0是逆时针。

　　x，y是弧端的坐标。

　　前两个参数和后两个参数不多说了，很简单；先说中间的三个参数：

　　x轴旋转表示旋转的角度。在下面的例子中感受圆弧的不同：复制代码如下：

　　svg宽度= 320像素高度= 320像素

　　路径d=M10 315

　　L 110 215

　　A 30 50 0 0 1 162.55 162.45

　　L 172.55 152.45

　　A 30 50 -45 0 1 215.1 109.9

　　L 315 10 stroke=黑色 fill=绿色 stroke-width= 2 fill-opacity= 0.5 /

　　/svg

　　上面的HTML绘制了下图：

　　从图中可以看出，不同的椭圆旋转参数导致绘制的圆弧方向不同。当然，这个参数对正圆没有影响。

　　Large-arc-flag和sweep-flag控制弧线的大小和方向，在下面的例子中体验弧线的不同：复制代码如下：

　　svg宽度= 325像素高度= 325像素

　　路径d=M80 80

　　一件45 45，0，0，0，125 125

　　L 125 80 Z fill=green/

　　路径d=M230 80

　　一件45 45，0，1，0，275 125

　　L 275 80 Z fill=red/

　　路径d=M80 230

　　一件45 45，0，0，1，125 275

　　L 125 230 Z fill=purple/

　　路径d=M230 230

　　一件45 45，0，1，1，275 275

　　L 275 230 Z fill=blue/

　　/svg

　　这个HTML绘制了以下图片：

　　从上面可以看出，这些参数实际上是确定圆弧所需的唯一参数。这里可以看到，SVG中的圆弧比canvas中的要复杂一点。绘制三次贝塞尔曲线指令：C x1 y1, x2 y2, x y

　　三次贝塞尔曲线有两个控制点，分别是(x1，y1)和(x2，y2)，最后一个(x，y)代表曲线的终点。体验下面的例子：复制如下代码：

　　svg宽度= 190像素高度= 160像素

　　path d=M10 10 C 20 20，40 20，50 10 stroke=黑色填充=透明/

　　path d=M70 10 C 70 20，120 20，120 10 stroke=黑色填充=透明/

　　path d=M130 10 C 120 20，180 20，170 10 stroke=黑色填充=透明/

　　路径d=M10 60 C 20 80，40 80，50 60 描边=黑色填充=透明/

　　path d=M70 60 C 70 80，110 80，110 60 stroke=黑色填充=透明/

　　path d=M130 60 C 120 80，180 80，170 60 stroke=黑色 fill=透明/

　　path d=M10 110 C 20 140，40 140，50 110 stroke=黑色填充=透明/

　　path d=M70 110 C 70 140，110 140，110 110 stroke=黑色填充=透明/

　　path d=M130 110 C 120 140，180 140，170 110 stroke=黑色填充=透明/

　　/svg

　　这个HTML片段绘制了如下图：从上面我们可以看到，控制点控制着曲线的弧度。

　　特殊版本的三次贝塞尔曲线：Sx2 y2, x y

　　很多时候，为了画出平滑的曲线，需要连续画几次曲线。此时，为了平滑过渡，第二条曲线的控制点往往是第一条曲线的控制点在曲线另一侧的映射点。此时可以使用这个简化版本。这里需要注意的是，如果S指令前面没有其他的S或C指令，此时，两个控制点会被认为是相同的，退化成一条二次贝塞尔曲线的样子；如果在另一条S指令或C指令之后使用S指令，则后一条S指令的第一个控制点将默认设置为前一条曲线的第二个控制点的映射点。体验一下：复制如下代码：

　　svg宽度= 190像素高度= 160像素

　　path d=M10 80 C 40 10，65 10，95 80 S 150 150，180 80 stroke=黑色填充=透明/

　　/svg

　　这个HTML片段绘制如下：

　　上面的S命令只有第二个控制点，第一个控制点采用了上一条曲线命令的第二个控制点的一个映射点。

　　绘制二次贝塞尔曲线指令：Qx1 y1, x y，T x y(特殊版本的二次贝塞尔曲线)二次贝塞尔曲线只有一个控制点(x1，y1)，通常如下图所示：

　　如果曲线是连续画的，也可以用简化版T。同样，只有当T前面有Q或T指令时，后面T指令的控制点才会默认设置为前面曲线控制点的映射点。体验一下：复制如下代码：

　　svg宽度= 190像素高度= 160像素

　　path d=M10 80 Q 52.5 10，95 80 T 180 80 stroke=黑色填充=透明/

　　/svg

　　这个HTML片段绘制如下：

　　同样，如果T指令前面没有Q或T指令，则认为没有控制点，画直线。相对坐标绘制指令和绝对坐标绘图指令是同一个字母，只不过都是小写。这组指令的参数中，与坐标相关的参数表示相对坐标，也就是说参数表示当前点到目标点的偏移量，正数表示到轴的正向偏移量，负数表示反向偏移量。但是对于Z指令来说，大小写没有区别。

　　这里注意，绝对坐标指令与相对坐标指令是可以混合使用。有时混合使用可以带来更灵活的绘画。

　　SVG path绘制注意事项：绘制带孔图形时要注意：外边缘的绘制需要逆时针，内孔边缘的顺序必须顺时针。只有这样画出来的图形才会有正确的填充效果。

　　实用参考：

　　脚本索引：http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs . 85)。文件

　　开发中心：https://developer.mozilla.org/en/SVG

　　大众参考：http://www.chinasvg.com/

　　官方文件：http://www.w3.org/TR/SVG11/

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。