HTML5 SVG

SVG矢量图的绘制:

1,可伸缩,在图像发达或者缩小的情况下图片的质量不会有所改变.可以在任何分辨率的情况下被高质量打印,

2,是万维网的标准,

3,图像的文本时可选的同时也是可搜索的

 4,可以被非常多的工具读取,比如记事本,

5,和其他图片比起来尺寸更小,可压缩性更强

6,SVG可以与JAVA技术一起运行

7,在HTML5中svg元素可以直接嵌入到html中  是纯粹的XML

 

简单使用

svg的默认尺寸是300,150,需要改变大小可以改变,要画的内容和文字一定要写在svg标签里面

在body中直接使用svg标签,在svg中的标签是没有代码提示的,敲的时候要小心,搜狗输入法中可以开启中文的方式来敲简单的英语单词,以防因为字母出错不好查找

<svg>

绘制矩形

width:宽
height:高
x y :设置矩形的起始点坐标
fill:填充颜色
stroke:边框颜色
stroke-width:边框的宽度
rx ry:设置圆角半径(内切圆) 如果两个值不同, rx表示椭圆的长轴半径, ry表示椭圆的短轴半径

 

</svg>

 

 

 <svg>

2.绘制圆形
cx cy :圆心坐标
r:半径

</svg> 

 

<svg>
3.绘制文本
x y : 设置文本的起始点位置 对应的是文本的左下角

</svg>

 

4,绘制椭圆

 

 

 

5.绘制多边形
points:定义多边形的各个顶点, 按照顺序依次连接
fill-rule:填充规则 默认值nozero(将边框线以内都填充),evenodd(根据内外添加, 判断一个点在图形的内外,从该点任意方向引出一条射线, 与边框线最多的交点个数,个数如果是偶数个表示该点再图形的外部)
画出来的是一个星星

 

 

6.绘制直线 两点坐标 

 

 

 

7.绘制折线: 所有点一次连接  自动填充 默认黑色- 

 

 

8.路径  利用路径设置动画效果

路径与动画效果相关联需要设置id来相互关联
M:moveTo L:lineTo