wide 制作SVG图片
使用wide 制作 svg 动态特效
下面我们在详细介绍下如何在wide中添加一个动态的svg图片。
首先我们定义一块画布，然后在上面画一个圆形。
<svg height="400" width="400">
<circle cx="200" cy="200" r="50" style="fill:#ff6600">
</circle>
</svg>
这时我们如果发布页面的话，看到的样子应该是：
现在我们做一个圆，并让他做一次缩放动作。
<svg width="400" height="400">
<circle cx="200" cy="200" r="54.8238" style="fill:#ff6600">
<animate
attributeName="r"
attributeType="XML"
from="50"
to="80"
begin="0s"
dur=".5s"
repeatCount="indefinite"
></animate>
</circle>
</svg>
我们可以看到，circle元素里边不再是空的，多了一个animate的元素，这个animate含有下面几个属性：
attributeName：动画属性名，通过它来改变属性
attributeType：动画属性的类别，常见的两个值，XML和css，取决于属性是使用的xml还是在style。
from to ：属性的开始和结束值，from可选，当不写的时候会取默认值。
begin dur ：动画的开始时间与结束时间。如果希望打开页面过几秒才开始动画，那么就定义begin就好了。
repeatCount ：属性的取值可以是一个数字，也可以是“indefinite”表示无限循环。
这时我们发布就可以看到:
这就是一个简单的svg动画了。但是虽然动画是循环状态，但是它的第一帧和最后一帧不是衔接的，显得画面有些突兀。我们可以看看动画的开始和结束的设置。
从上面的属性可以看到，from和to定义的开始和终结两个时间点。而两者之外，另外还有一个属性by，是可以替代to的。
to表示的是一个绝对值，by表示的是一个offset，比如from为50，to为80，表示从50到80，by为80的话，表示offset为80，那么最终的结果就是130,如果我们的demo使用by，那么就是by 30.除了by意外，还有一个属性values，他可以接受一组数值，比如我们想作出圆的呼吸效果，那么只需要将 from 和 to 改为 valuse：
<svg width="400" height="400">
<circle cx="200" cy="200" r="61.0087" style="fill:#ff6600">
<animate attributeName="r" attributeType="XML" values="50;80;50" begin="0s" dur="2s" repeatCount="indefinite"></animate>
</circle>
</svg>
这时我们发布就可以看到:
