html5 SVG

标签：html5   矢量图   svg   path   

1，SVG是可伸缩矢量图形。含有不同标签<rect>用于创建矩形；<circle>创建圆形；<ellipse>用于创建椭圆；<line>线；<polyline>折线；<polygon>多边形

2，svg <path d="M 250,150 L150,350 L350 350 Z"/>

定义了一条路径，开始于（250px,150px），到达（150px,350px），再到达（350px,350px），最后在（250px,150px）处关闭路径

以下命令 大写表示绝对定位，小写表示相对定位：

• M = moveto
• L = lineto
• H = horizontal lineto
• V = vertical lineto
• C = curveto

• Z = closepath

3，svg <g>

将多个元素组织在一起

4，svg ViewBox

如果svg图形太大或者太小，就可以用ViewBox属性来调整在页面中的显示范围、大小。 <svg width="50cm" height="25cm" viewBox="0 0 2050 1000" > ：意思是 svg 图形的 2050px ， 1000px 范围，显示到 50cm,25cm 的视口， 0 ， 0 是在视口中的起点坐标。

html5 SVG

标签：html5   矢量图   svg   path   

原文地址：http://blog.csdn.net/liu__hua/article/details/40479861