AI+SVG的继续学习
AI+SVG的继续学习 今天尝试了一下用SVG制作动画
实现效果如下：
实际效果比这个流畅，关键的动画代码如下：
dur='8s' repeatCount='indefinite'
rotate='auto' /
但对于动画的学习我决定到此为止，因为没有强大工具的支持（我在AI中没有找到），完全用代码去写动画那简直是恶梦，目前来说SVG的矢量动画只能是当作辅助，其动画能力应该还是不错的，但由于没有FLASH这种工具的支持，恐怕难以流行。
全部代码见附件：
基本图形的使用
圆，椭圆，方，长方，线，不规则图形，以及文字，大杂烩在一起使用一下：
代码也很简单：
<ellipse cx='75' cy='125' rx='50' ry='25' />
<rect x='155' y='5' width='75' height='100'/>
<rect x='250' y='5' width='75' height='100' rx='30' ry='20' />
<line x1='0' y1='150' x2='400' y2='150'
stroke-width='2' stroke='blue'/>
<polyline points='50,175 150,175 150,125 250,200' />
<polygon points='350,75 379,175 355,175 355,200 345,200
345,175 321,175' />
<rect x='0' y='0' width='600' height='400'
fill='none' stroke='red' stroke-width='3' />
<text x='10' y='300' font-size='40' fill='yellow' stroke='red'>清风 Breeze</text>
关于路径的使用也很简单：
fill='red' stroke='blue' stroke-width='3' />
OK，SVG的代码还是挺好理解，挺好掌握的，但是但是，特别复杂的图形，如果都用代码手工写，那会吐血的，所以我们的目标就是了解，然后用AI去制作图形，手工去优化生成的代码。
随便用AI制作几个基本图形：
生成的代码15.3kb，用记事本打开也会发现很乱，不过有了上面的学习基础，我们来进行一下优化。
仔细看你会发现，只要删除<metadata></metadata>中的数据，那么这个svg文件与手写的就没有太大区别了。删除后的大小仅1.33kb
其关键代码也不过如下几行：
<circle fill='#BFC9FF' stroke='#000000' cx='197.695' cy='54.833' r='49.667'/>
<line fill='none' stroke='#000000' x1='28.695' y1='143.167' x2='288.696' y2='143.167'/>
<text transform='matrix(0.8988 0 0 1 81.3618219.8857)'><tspan x='0' y='0' fill='#FF843F'font-family=''SimSun'' a:adobe-font-script='chineseSimplified'font-size='35'>清风 Breeze</tspan></text>
<ellipse fill='#BFC9FF' stroke='#000000' cx='308.029' cy='77.5' rx='32' ry='69'/>
<polyline fill='#BFC9FF' stroke='#000000' points='0.029,80.5 46.029,77.833 60.695,117.167 '/>
和手工写基本一样。
OK，接下来就要学习AI制作图表了，也是SVG的强项所在。
