AI+SVG的继续学习

原创 2005年05月08日 21:42:00
今天尝试了一下用SVG制作动画

实现效果如下:

此主题相关图片


实际效果比这个流畅,关键的动画代码如下:


<animateMotion path="M0,300 S150,100 200,200 S400,400 500,0"
                   dur="8s" repeatCount="indefinite"
                   rotate="auto" /


但对于动画的学习我决定到此为止,因为没有强大工具的支持(我在AI中没有找到),完全用代码去写动画那简直是恶梦,目前来说SVG的矢量动画只能是当作辅助,其动画能力应该还是不错的,但由于没有FLASH这种工具的支持,恐怕难以流行。

全部代码见附件:
此主题相关文件 161417.zip

基本图形的使用

圆,椭圆,方,长方,线,不规则图形,以及文字,大杂烩在一起使用一下:
此主题相关图片


代码也很简单:

<circle cx="50" cy="50" r="25" />
    <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>


关于路径的使用也很简单:

<path d="M 100 100 L 300 50 L 300 250 L 100 300 Z"
         fill="red" stroke="blue" stroke-width="3" />

此主题相关图片


OK,SVG的代码还是挺好理解,挺好掌握的,但是但是,特别复杂的图形,如果都用代码手工写,那会吐血的,所以我们的目标就是了解,然后用AI去制作图形,手工去优化生成的代码。

随便用AI制作几个基本图形:
此主题相关图片


生成的代码15.3kb,用记事本打开也会发现很乱,不过有了上面的学习基础,我们来进行一下优化。
仔细看你会发现,只要删除<metadata></metadata>中的数据,那么这个svg文件与手写的就没有太大区别了。删除后的大小仅1.33kb

其关键代码也不过如下几行:

<rect x="17.362" y="0.5" fill="#FFFFFF" stroke="#000000" width="92.667" height="48.667"/>
                 <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.3618 219.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的强项所在。

AI图标另存为SVG的方法

1、对象--路径---轮廓化描边 2、对象--画板--适合图稿边界 3、另存为-svg 4、

制作svg动画

要实现一步一步画出来一个图片,css3做不到吧,除非一张张的图片定时显示。想不到别的招了。现在用的是一个插件,做了一个svg动画。 插件地址:http://lazylinepainter.info/...

shp文件转换成svg文件

        依据展现平台硬体规格及运算能力的差异,Mobile SVG可分为SVG-B(Basic)及SVG-T(Tiny)两种不同的profiles。以相容性角度来看待这些不同的profil...
  • midi13
  • midi13
  • 2007年09月17日 19:46
  • 3993

免费资源:Polaris UI套件 + Linecons图标集(AI, PDF, PNG, PSD, SVG)

日期:2013-2-10  来源:GBin1.com Polaris UI Kit Polaris UI Pack是一套超酷的UI组件,包含了,编辑框,选择框,多选框,页面导航,按钮,菜单等等...
  • jjfat
  • jjfat
  • 2013年02月17日 13:48
  • 1023

基于PS和AI软件的PSB转AI再转SVG流程

基于PS和AI软件的PSB转AI再转SVG流程 说明:我们要实现的是把地图数据包(shp格式)最终转换到geojson格式文件,而这套流程需要经历到PS和AI的使用,本文用于说明怎样使用PS和AI...

我学习的svg的内容

  • 2016年11月01日 10:43
  • 100KB
  • 下载

svg 学习 资料

  • 2016年06月27日 10:00
  • 4.46MB
  • 下载

svg学习笔记(一):写在前面的话

一直以来都是默默地在CSDN上活着,不时的看看大牛的博客,用以提高自己的技术水平,随之而来的是我发现大牛们的一个共同点,就是他们都喜欢对一个技术从头到尾的去介绍,而不是向我这种用到了某个技术点就随便记...

SVG学习手册

  • 2013年04月15日 16:14
  • 71KB
  • 下载

学习SVG图形知识的教程

  • 2011年03月04日 11:43
  • 833KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AI+SVG的继续学习
举报原因:
原因补充:

(最多只允许输入30个字)