svg动画（一）

1.目的

理解svg的一些基本概念：width，height、viewBox、preserveAspectRatio。

2.如何理解svg

一个完整的svg写法

<svg width="400" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMinYMin meet" style="border:1px solid #cd0000;">
    <rect x="10" y="10" width="150" height="150" fill="#cd0000"/>
</svg>

2.1 理解width和height

width和height可以理解成画布，svg在屏幕占的真实大小。width和height的如果没有指定单位，那么单位就是是px。
在使用svg的时候必须指定宽高，否则会出现莫名其妙的现象。

2.2 理解viewBox

viewBox指定了一个区域，左上角是(0, 0)、右下角是(200, 200)，即200x200。然后将这个区域放大到400x200。
viewBox，这个属性不是必须的。指定宽高就行了。

2.3 理解preserveAspectRatio

使用viewBox的时候，我们需要按照自己的要求去放大，那就可以使用了preserveAspectRatio。preserveAspectRatio就是来控制放大方式的

3.参考地址

下面的链接里面讲的很好了。我就不举实际例子了。
http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/