H5中的SVG

SVG

首先我们要知道什么是SVG，SVG是指可伸缩矢量图形，可用于定义用于网络的基于矢量的图形，可使用 XML 格式定义图形。并且SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失，SVG还是万维网联盟的标准。SVG与其他的图像格式相比，它的优势在于：1、SVG 图像可通过文本编辑器来创建和修改；2、SVG 图像可被搜索、索引、脚本化或压缩；3、SVG 是可伸缩的；4、SVG 图像可在任何的分辨率下被高质量地打印；5、SVG 可在图像质量不下降的情况下被放大。
接下来举几个例子在SVG中绘制图形：
ex： 这个就是画一条直线开始的坐标和结束的坐标。 这个也是画线，不过这个是一笔化成一个五角星。
然后是多边形：



这个也是蛮简单的，就把三角形的三个点的坐标找到就好了。
然后我们画个椭圆：

椭圆的话给它设置两个圆心坐标就好了。
画矩形的话：因为只有HTMLDOM标签才有直接可以赋值的属性，SVG标签属于没有纳入HTMLDOM规范，所以对SVG标签的js动态设置属性，需要使用核心DOM的API
ex：var rect = document.createElementNS(“http://www.w3.org/2000/svg”,“rect”);
rect.setAttribute(“width”, 100);
rect.setAttribute(“height”, 100);
rect.setAttribute(“x”, i100);
rect.setAttribute(“y”, j100);
这样子的话就可以画出一个矩形了。
最后举一个动态添加圆形的例子：
ex：
var c = document.createElementNS(“http://www.w3.org/2000/svg”, “circle”);
c.setAttribute(“r”, rn(5,100));
c.setAttribute(“cx”, rn(0,600));
c.setAttribute(“cy”, rn(0,400));
c.setAttribute(“fill”, rc(0,256));
c.setAttribute(“fill-opacity”, Math.random());
svg1.appendChild( c )；
首先我们要创建半径，然后设置一下圆心的坐标，然后给圆填充一下颜色，设置一下透明度，最后把圆添加进去就好了。