HTML5 svg画布

说起画布，我在上周更新了一篇 HTML5 canvas画布canvas画布，里面也介绍了canvas与svg的区别，今天就不在重复，需要的的小伙伴可以去查看。

创建（svg）

废话不说，我们来创建一个svg

<svg></svg>

可以看到我们的svg和canvas一样，他们都这自己的默认宽高度，并且都是300*150。

线条（line）

svg创建完成后，我们绘制元素与canvas有所不同，svg创建元素是在内直接使用标签创建的。（注意此时的标签并不属于HTML），让我们来创建一个线条来看看效果

<svg width='100' height='100'>
	<line x1='0' y1='0' x2='100' y2='100' stroke='black'></line>
</svg>

获取属性

此时的标签会在DOM结构中现实出来，我们我们可以去获取元素并且更改他们吗？

document.getElementsByTagName('line')

元素获取到再来尝试一下获取元素的x1属性

我们发现我们并没有获取到元素的属性，而是返回了一个对象。
此时我想起了svg的元素并不是属于HTML的，那么是不是应为不能够使用HTML DOM操作呢？我们换一种方式获取下元素的属性。

修改属性

我们成功的获取到了元素的属性，接下来对他进行修改操作

和canvas不一样的是当我进行修改属性的时候，svg图像直接发生了改变；原来svg里创建的图形都是一个对象，当对象的属性值发生改变时，svg的图像也随之改变。

创建矩形（rect）

<svg width='100' height='100'>
	<rect width='20' height='20' x='20' y='20' fill='yellow' stroke='red'></rect>
</svg>

创建圆形（circle）

<svg width='100' height='100'>
	<circle  cx='20' cy='20' r='10' fill='yellow' stroke='red'></circle>
</svg>

创建椭圆（ellipse）

<svg width='100' height='100'>
	<ellipse cx="50" cy="20" rx="30" ry="10" fill="red"></ellipse>
</svg>

创建线条（polyline）

<svg width='100' height='100'>
<polyline points="5,10 10,20 20,35 25,30"></polyline>
</svg>

我们发现他被填充了，如果我们不想让他被填充该怎么办呢？
这个时候我们只需要设置将填充的颜色设置为透明色就可以实现不填充了。

<svg width='100' height='100'>
<polyline points="5,10 10,20 20,35 25,30" stroke="#000" fill-opacity="0"></polyline>
</svg>

Javascript绘制svg图像

在实际开发中，我们经常会使用动态创建的方法绘制图像

var rect = document.createElement('rect');
rect.setAttribute('width',20);
rect.setAttribute('height',20);
rect.setAttribute('x',20);
rect.setAttribute('y',20);
rect.setAttribute('fill','red');
svg.append(rect)

创建一个矩形，设置了属性宽高和填充的颜色，页面上也追加上去了，为什么现实不出来呢？
原来svg的元素并不是属于HTML的，所有每次创建的时候我们需要为这些元素设置命名空间。

var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
rect.setAttribute('width',20);
rect.setAttribute('height',20);
rect.setAttribute('x',20);
rect.setAttribute('y',20);
rect.setAttribute('fill','red');
svg.append(rect)