作者：Chris Coyier,大漠（译）
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
SVG动画试读：
前言
艺术和代码相交，诞生了SVG动画
人们常常开玩笑地形容，从事SVG（可缩放矢量图）的人，一定是一个“考古学家”，并且是和SVG一样有趣的人。这个比喻比较恰当。先前的SVG技术，由于缺乏浏览器厂商的支持和人们对这种技术的理解，曲折地发展了一段时间，但是现在它以优秀的兼容性重树威信，在开源社区拥有了很高的地位，以下是SVG的一些优点。
数据可视化
SVG允许人们通过真实的数据直观地表达想法，并着重于复杂的思想交流展现。
设备响应式
世界上需要兼容的仪器、网页视窗、视网膜设备有成百上千种，SVG有能力通过使用一张矢量缩放图来兼容各种设备，让你的资源加载列表变得清爽简单。SVG是响应式兼容配置的游戏规则改变者。
性能表现
如果我们正确地构建SVG，并减少路径点和简化图形细节（优化手段），SVG文件的大小会十分轻量，位图无法与其竞争。通过正确构建SVG，可以让我们的网站在加载资源时变得快捷可用。
可操作的DOM结构
对于开发者来说，SVG拥有可操作的DOM结构这一点，起初并不起眼，但实际上这个特点对于开发却是极其方便的。拥有一体化DOM结构的SVG，意味着你的代码可以为屏幕阅读器提供更多的信息，并且让图形代码看起来非常容易理解。你还可以正确地找到图形片段的内部节点，为这些小的DOM片段同时添加动画和操作。在本书中，你会发现这个特性真的很强，它能让你远离那些将人逼疯的有关z-index 和 position 相关操作的设置。
我们可以流畅自由地使用SVG制作动画，但这仅仅触及了这项技术强大潜力的表面。作为一名开发者，当看到灵活的响应式媒体动画组件和Snap动画时，你一定会极其兴奋。SVG还有令人称奇的一点就是可以使用数学方法绘制图案。
本书由始至终都贯穿着SVG的相关知识。谈到SVG，我们就要讨论与SVG DOM相关的基础知识，它结构简单，工作起来让人觉得代码浅显易懂。我们还将讨论SVG性能方面的设计，将学会如何精简SVG文件的体积和结构，借此避免由于SVG的原因使网站性能大打折扣。必不可少的，我们还将讨论如何通过CSS操控SVG进行动画制作，学习一些相关理论，然后学习使用JavaScript深入SVG动画制作，以完成优美且有趣的各种动画效果。如果想了解如何设计SVG（编码+优化），那么你可以详细阅读此书的前半部分。本书的后半部分更加适合JavaScript开发者学习如何使用JS控制SVG动画，SVG这一技术将设计和开发的世界融合起来，所以本书两个方面都会涉及。我建议读者首先阅读第1章，因为它是理解后续章节的基础。
使用SVG制作动画，是我的互联网从业生涯中最激动人心的一部分：它激发出了我关于代码性能、代码易用性、设计美感以及创造性的潜力，让我学会避免了一些丑陋的代码以及图片黑科技（hack技术），让我在需要的时候能够对页面进行响应式设计。这一技术还让我创作出了许多令人惊叹的数据可视化作品，帮助我方便地通过图表与用户交流、讲述原理，或者做一些优化用户交互体验的改进。
虽然我拥有15年以上的前端开发经验，但是学习SVG动画技术，激起了我的动画制作兴趣，为我开拓了新的开发领域。我希望你也能够喜欢这本书，并且为互联网创造出更多动态SVG作品。这是一个令人激动的时代，SVG的潜力还未完全激发出来。目前，只有一小部分的SVG功能运用到Web设计和开发中。我期待看到你在读完此书之后，借助学到的知识所做的优雅作品。让我们一起推动互联网再一次的革新浪潮吧！
本书使用的约定
本书使用的约定如下。
斜体（Italic）
用于表明新术语、网址、电子邮件地址、文件名和文件扩展名。
等宽字体（Constant width）
用于程序清单，以及在段落中对变量、函数名、数据库、数据类型、环境变量、语句和关键字等程序元素的引用。
等宽加粗字体（Constant width bold）
用于显示命令或其他需要用户输入的文字。
等宽斜体字体（Constant width italic）
用于显示应该由用户提供或者根据上下文确定的值。
该图标表示提示或建议。
该图标表示一般性的注释。
该图标表示提醒或警告。
中文版书中切口以表示原书页码，便于读者与英文原版图书对照阅读，本书索引中所列的页码也为英文原版图书中的页码。
关于使用本书示例代码
我们感谢但不要求注明出处。出处的格式一般包括标题、作者、出版商和ISBN。示例如下：“SVG Animations by Sarah Drasner （O’Reilly）. Copyright 2017 Sarah Drasner， 978-1-491-93970-3.”
如果你觉得示例代码的使用不合理或不符合以上的许可权限，请随时联系我们：permissions@oreilly.com。
如何联系我们
请将对本书的评价和存在的问题通过如下地址告知出版者：
美国：
O’Reilly Media， Inc.
1005 Gravenstein Highway North
Sebastopol， CA 95472
中国：
北京市西城区西直门南大街2 号成铭大厦C 座807 室（100035）
奥莱利技术咨询（北京）有限公司
O’Reilly的每一本书都有专属网站，你可以在那里找到关于本书的相关信息，包括勘误列表、示例代码以及其他信息。本书的网站地址是：
http:/oreil.ly/2nouksg
对于本书的评论和技术性的问题，请发送电子邮件到：
bookquestions@oreilly.com
关于我们的书籍、课程、会议和新闻的更多信息，请参阅我们的网站http://www.oreilly.com。
在Facebook 上找到我们：http://facebook.com/oreilly
在Twitter 上关注我们：http://twitter.com/oreillymedia
在YouTube 上观看我们：http://www.youtube.com/oreillymedia
致谢
首先我想感谢 Meg Foley，她是一名有着惊人工作能力的编辑。她对我的指导和关心，我感激不尽。可以说，没有她，就没有这本书。
其次，我想感谢那些技术校审者：Amelia Bellamy-Royds、Dudley Storey 和 Val Head，他们经过多番讨论最终帮助我确定了此书的脉络结构，感谢你们的辛苦付出。我还想感谢GreenSock 组织的Jack Doyle和Carl Schooff、React-Motion的Cheng Lou，以及mo.js 的作者Oleg Solomka。感谢他们审校了本书关于他们资源库的链接地址以及为互联网创造了如此令人赞叹的动画工具。感谢SVG发明者Chris Lilley，他是一名值得尊敬的先驱！感谢他为本书写了如此精彩的序，同时，在技术文章的写作方面亦是我的良师益友。他还教会了我一些CSS技巧和其他知识。
最后，我想着重感谢 Dizzy Smith、Meagan French 和 Donna Ferriero，他们在我写作本书期间给予了极大的支持。特别是在我好高骛远的那段日子中，感谢你们对我的照顾以及陪我走过了一段又一段里程。你们是最棒的！
读者服务
轻松注册成为博文视点社区用户（www.broadview.com.cn），扫码直达本书页面。
• 提交勘误：你对书中内容的修改意见可在提交勘误处提交，若被采纳，将获赠博文视点社区积分（在购买电子书时，积分可用来抵扣相应金额）。
• 交流互动：在页面下方读者评论处留下你的疑问或观点，与我们和其他读者一同学习交流。
页面入口：http：//www.broadview.com.cn/33790第1章剖析SVG
可缩放矢量图（SVG）正日益成为互联网中一种较流行的图片格式，这种格式的优点可以概括为以下几点。
•SVG图片是可缩放的，这对于市面上越来越多需要适配的屏幕视窗（viewport）有巨大的好处。我们借助SVG技术可以实现：只制作一张SVG图片，就可以对所有设备做到适配兼容，并进行缓存，下次访问时不需要再次请求。而对比CSS技术来说，我们可能需要用到srcset或根据不同的视窗所需的图片来配置 @media 等方案来解决适配的问题。SVG避免了所有的额外工作。
•矢量图（相对位图来说）意味着，由于使用了数学方法绘制，图片文件有着更好的质量和更小的体积。
SVG 是一种 XML格式的文件，我们可以使用这种格式简洁地描述图形、线和文本，并且可以同时使用DOM去操作这些元素。这就意味着SVG 是高效且易理解的。
在第1章里，我们将夯实SVG DOM的基础知识，因为后面需要借助这些基础知识来实现复杂的SVG动画。我们将讨论一些基本的SVG语法，同时你可以依照自己的想法尝试操作并调试它们。我们不会深挖SVG DOM 的每一个细节，因为这并不在本书的讨论范畴内。如果你想了解更多， 推荐去看同样由 O’Reilly 出版的图书：
• SVG Essentials（作者 J. David Eisenberg）
• SVG Colors, Patterns, and Gradients（作者Amelia Bellamy-Royds、Kurt Cagle）
这些都是与SVG相关的很不错的学习资源。SVG DOM语法
参考图 1-1，对应的代码如下所示：图1-1：SVG 编码的结果
让我们看看这个SVG的结构，大部分标签对于你来说都很熟悉吧？由于和HTML相通，SVG的语法也是简单易读的。在根节点
SVG的viewBox是一个非常强大的属性，因为是它真正地允许SVG 画布无限延伸，并同时控制和精确定义SVG的可视空间。按照x、y、width和height 的顺序，viewBox有4个参数需要设置。可以发现，viewBox的值并没有带单位，这是因为SVG可视空间并不是基于像素来设定的，而是一个可任意延展的空间，这样就可以适应许多不同的尺寸。为了便于理解，我们想象图1-1中的图形是画在一张方格纸中的（参见图 1-2）。
我们可以基于这张方格纸定义一个坐标系，这张方格纸本身是自我独立的。可以随意改变这张方格纸的width、height 或者任意事物。例如，如果我们将
译者注
我们可以理解为，所有图形都基于viewBox的坐标系，并绘制在viewBox中，而viewBox 会自动根据
这就是为什么SVG能成为响应式开发适配利器的其中一个原因。SVG 同时也会存储超出viewBox的信息。如果我们把一个图形移动到viewBox 之外，情况如图1-4所示。图 1-4：将图形溢出viewBox 空间之外的结果
如图1-4所示，只有白色的区域是用户能看到的，但实际上无论可视或是不可视区域内的绘图信息，都会被SVG元素保存起来。这个特性让SVG可被随意伸缩和裁切。对于响应式应用来说这是十分方便的， 特别是用于SVG Sprite技术。
在这个例子中还隐藏了一个需要了解的关于viewBox的知识，那就是SVG的一个属性——preserveAspectRatio。平时我们看到的许多SVG中都没有这个属性的声明，所以大多数人都不了解它。它的初始值为 xMidYMid meet，这使得viewBox以均匀的比例来适应SVG容器。
关于这个属性还有其他一些选项，其中第一个参数 xMidYMid 决定了SVG内的画布是否以均匀的比例来缩放以及缩放的位置，写法是以驼峰命名法构成的（注意Y是大写）。虽然初始的缩放位置默认从正中间开始，但也有一些其他对齐选项，例如xMinYMax。 你也可以将其设置为none，在这种情况下，SVG的横纵比将会被忽略，整个viewBox画布会以压扁或拉伸的方式填充到SVG的可用空间中。
第二个参数可选的值只有 slice 或 meet。meet 会按照SVG的横纵比把整个viewBox 的内容全部填充到SVG中，这个功能可以类比 CSS3中的background-size:contain;，图片内容会永远保持在容器边缘内部。
slice允许viewBox 超出用户的可视区，并在指定方向上填充可用区域。你可以将其类比 CSS3 中的 background-size:cover;，图片内容会超出容器边缘进行填充。
译者注
Meet 算法——计算viewBox的横纵比 width/height。
• 如果大于1：取SVG宽为viewBox的宽，根据比例计算viewBox的高， 然后根据preserveAspectRatio 中的第一个参数调整viewBox的位置。
• 如果小于1：取SVG高为viewBox的高，根据比例计算viewBox的宽， 然后根据preserveAspectRatio 中的第一个参数调整viewBox的位置。
Slice 算法：首先假设SVG的宽高固定。当选择slice后计算viewBox的横纵比width/height。
• 如果大于1：取y轴方向为基准。整个viewBox的高设为SVG的高，然后再根据比例求出viewBox的宽，最后根据preserveAspectRatio 中的x[Min|Mid|Max]调整绘制区域位置。此时 Y[Min|Mid|Max] 无效。
• 如果小于1：取x轴方向为基准。整个viewBox的宽设为SVG的宽，然后再根据比例求出绘制区域的高，最后根据preserveAspectRatio 中的Y[Min|Mid|Max]调整绘制区域位置。此时 x[Min|Mid|Max] 无效。
只要preserveAspectRatio的第一个参数不为none，就能保证viewBox是等比缩放的。
关于PreserveAspectRatio的更多知识可阅读张鑫旭的这篇文章，http://www.zhangxinxu.com/wordpress/2014/08/svg-viewport-viewbox-preserveaspectratio/。
更多资源
Sara Soueidan做了一个极其直观和具有帮助性的demo让你边操作边理解viewBox系统（https://sarasoueidan.com/demos/interactive-svg-coordinatesystem/index.html）。
Amelia Bellamy-Royds 在CSS-Tricks 网站上也做了很多例子帮助你弄懂viewBox（https://css-tricks.com/scale-svg/）。
Joni Trythall也有很多很棒的关于viewBox和viewport的资源等你来体验（http://jonibologna.com/svg-viewbox-and-viewport）。绘制图形
在上文绘制的SVG中，我们定义了5种不同的形状。
f ill（填充色） 和 stroke（描边色） 属性被设定为 white 和 black。如果没有设定f ill和 stroke，那么它们的默认值是 f ill: black;和 stroke: none; （没有描边）。
cx、cy定义的是圆的圆心坐标，r为圆的半径。你也可以用
和你想象的一样，例如对于 279,5 来说，以逗号分隔，前一个数为一个点的x坐标，后一个数为一个点的y坐标。 多个点共同组成了这个多边形。
x1和y1 为线的起点值，x2和y2 为线的终点值，在这里设置了两条语法相近的线，你可以对比着判断哪条为直线，哪条为对角线。响应式SVG、组和绘制路径
现在让我们看图 1-5 和相应的代码：图 1-5：一个没有定义width和height的SVG
首先需要注意的一点是，这个SVG的width和height都没有定义，而实际上，我们可以将SVG的一些属性定义在其他地方（例如CSS、引入SVG的或
译者注
这种特性使得SVG具有很强的延展性，特别是对于响应式开发来说。
宽/高适配
使用CSS控制一个元素的尺寸，并且将尺寸都保存在一个CSS文件中，这种做法是较好且简单的。但是，我通常不会在CSS内定义SVG的width和height，因为担心CSS文件不能被正常加载。如果同时也没有在SVG中设置width 和 height属性，那么SVG就会继承父级的宽高，这样就完美地达到响应适配的效果了。介于这个原因，当需要设定宽高的时候，可以在SVG中加上行列属性作为保障，因为CSS属性会覆盖行列属性的值。而如果CSS属性没有被正确加载，则会取用行列属性。
SVG可依照百分比或者视窗单位进行适配，甚至还可以通过媒体查询来影响SVG的尺寸。而唯一不足的是，在这个例子中，你必须声明viewBox，一个缺少width和height属性并且声明了viewBox的SVG元素的默认行为是继承包含自身的父级元素，这个父级元素可能是body、div或者其他元素。
其次我想指出的是
最后一件非常重要的事就是解释path元素的语法，一条路径起始于 d 属性， d 即是data，也就是一条路径的绘图数据。d通常会以一个M 或 m（即moveTo，移动到）为第一个值，也就是确定一个新的起点。语法上和创建一个polygon或polyline是不同的，同时这个起点也不一定会在最终绘出的路径上。
表 1-1 向我们展现了path中的各种命令的含义，命令都有大小写之分，大写命令定义的是相对路径，而小写命令定义的是绝对路径。表 1-1 路径语法续表
再回去看图1-5及其代码，可以清楚地发现path和polygon/polyline的区别在于使用了z命令作为路径的结束符。进一步学习path data已经超出了本书的范畴，但是这里有Sten Hougaard制作的一个直观的demo，可帮助读者更好地了解path语法（http://codepen.io/netsi1964/pen/pJzWoz）。SVG 的导出、建议及优化
你可以完全手写SVG，也可以使用JS库来绘制SVG，例如D3（http://d3js.org/）。但是，当你想设计和创建一个SVG时应该选用例如Adobe Illustrator（下文简称AI，见图1-6）、Sketch 或者 Inkscape 这样的矢量图处理工具。通过使用这些工具，每一图层中的图片会以g标签的形式被导出，并将图层名赋值给 g 标签的id。下面是一个导出SVG的示例，你可能会发现你的SVG多出了很多前面例子中没有的信息。
这里贴出之前的示例便于进行比较：你可以发现之前的示例更简洁，这是由于没有正确地进行优化操作，所以SVG代码很容易出现冗余。
AI 小技巧
当使用 AI 的时候，应该确保使用“文件→导出→SVG（这个功能只支持AI CC 2015.2以上版本）”这样的步骤来导出SVG，而不是直接选择“另存为”，然后就会弹出一个SVG选项对话框，如图1-6所示。图1-6：从AI中导出SVG的设置
这种方式导出SVG会比直接通过“另存为”命令生成的没有进行优化的SVG在体积上更小，且绘图信息更精确。
我本人总会保留数份.ai的源文件，因为当需要大规模修改SVG的时候，在AI上不能很好地对SVG旧版本进行回溯。
AI导出的SVG中有一些信息是十分有用的，但有些是可以丢弃的，例如AI导出的SVG中夹带的注释部分。版本信息和图层信息也不需要。当用于线上环境的时候，这些信息通常没有什么用，增加了体积还不便于传输，应尽量让SVG文件体积更小。
如果将 x 和 y 都设为 0 （通常情况下）， 我们是可以把它们去掉的，唯一需要保留的情况是：当子级也有SVG嵌套需要定位的时候。
如果使用的是行内的SVG，同样也可以去掉关于 XML 的定义。强调一下，在此书内自始至终都会使用行内的SVG，这样能更好地控制SVG动画，减小出错的风险。但是有些时候在动画中使用SVG作为背景图片也是非常不错的选择（我们会在第3章和第4章讲解SVG Sprite时进行更详细的讨论）。而当使用SVG做图片或背景的时候需要把XML标签声明加上，以兼容老式浏览器：
xmlns="http://www.w3.org/2000/svg"
如果你确定用不到，那么最好把它去掉。
也可以优化path，AI导出的SVG 中的path 数据会夹带许多浮点小数，通常情况下这些数是可以被四舍五入的。同时导出的g标签也会扰乱你的代码，让我们来看看下面几个可能需要优化的地方。减少路径点
如果你想创建一个手绘图的效果，可以通过“对象→路径→简化”命令来帮你获取每个点的值。图1-7 所示的是一张“简化”对话框的截图。你需要勾选Preview复选框来实时查看改变后的结果，因为在这个阶段，没调好参数可能会改变图片的质量。如图1-7所示，随着曲线精度的增高，图片质量会快速降低。这个例子中使用的曲线精度为95%。随着精度的降低，会减少路径点数据，同时SVG 文件的体积也会快速减小。图1-7：AI的“简化”对话框，可以快速减小SVG文件的体积
上文提到的方法也许是完成简化最快的一种方式。而对于那些较小、不是太重要、不太复杂的SVG图层来说，我会选择用钢笔工具手动重绘它们。采用这种方式的效果不一定很显著，视图形形状而定。也许你付出了很多却收效甚微。
这听起来好像很难，不过你确实可以使用钢笔工具快速绘制出很多复杂的区域。同时使用路径选择工具可以将多个复杂的区域进行合并（参见图1-8）。如果这看起来好像有点不对，不要怕，你可以略微减少合并后的图层的透明度（这样就可以看到你试图用简单图形来模仿下面用路径绘制的复杂图形了）。然后选择直接选择工具（工具栏中的白色箭头是快捷键），使用这个工具拖动图形点可不断优化你绘制的图层，直到效果和自动产出的结果差不多为止。这样处理的效果，细节上放大看起来也差不多，但是文件体积减小了。图 1-8：快速绘制多个图形，并将它们融合到一起，从而替代一个由SVG自动产生的路径图优化工具
其实没必要手动去掉那些不必要的信息，因为开源社区提供了很多用于优化SVG的工具，它们可以帮助你减少代码体积。这些工具具有如下一些功能：自动四舍五入过长的数字，合并路径数据， 移除非必要的图层等。
下面介绍一些有用的开源工具。使用这些工具，你可以直接看到优化后产出的代码和效果，这样有助于你选择合适的工具。
SVGOMG （https://jakearchibald.github.io/svgomg/）
这是由Jake Archibald开发的一款很棒的在线GUI 优化工具，它底层是基于终端SVGO内核的。这个工具对于工作来说最稳健、最简单，其包含了很多优化选项。SVGOMG还可以直接展示优化后的效果图，以及优化前后文件大小的对比。
SVG Editor（ http://petercollingridge.appspot.com/svg-editor-）
Peter Collingridge开发的SVG Editor工具与SVGOMG类似，不过功能略微少了一些。有一个不错的功能是，当你想轻调某一处细节时，可以在左边的输入框中进行修改，并且在右边能同时看到效果。 这个工具也是在线工具，具有不错的可视化界面。
SVGO （https://github.com/svg/svgo-）
SVGO 是一款基于Node.js的SVG优化工具，它并不是一个可视化工具，但是SVG组织提供了SVGO-GUI这款可视化工具。使用SVGO 之前可能需要进行一些配置（安装Node下载依赖包等），不过如果相对于总是要切换浏览器界面来说，终端操作更加方便，那么选用终端化SVGO也是一种工作享受。这个工具和SVGOMG具有相同的功能。
如何决定改变或者调整某些优化选项呢？这依赖于你想实现一个怎样的动画。请合理优化你想要的结果，不要直接使用默认优化设置，这样能帮你节省大量的时间。在开发过程中，你可能发现有一段比较复杂的动画需要反复进行优化，这时我建议你在开发的同时打开代码编辑器、图片编辑工具以及优化工具，这样能尽可能地保持工作流无缝对接。
默认导出设置
当你导出SVG图的时候，需要注意一些默认的导出配置。
这里有一些我经常勾选或取消的默认配置。
• 清除ID：这个选项会去掉你仔细为各个图层设置的名字。
• 去掉无用的g标签：当需要为多个图层同时制作动画的时候，可以用g标签将它们包起来，否则还是保持代码原样较好。
• 合并路径：这个选项多数时候都是工作正常的，不过有些时候，当合并多个路径的时候，你会发现不能通过DOM独立移动元素了。
• 保持代码缩进：只有当需要在编辑器上编辑SVG代码的时候才需要保持代码缩进，其他情况下请压缩你的SVG代码。第2章使用CSS制作SVG动画
大概因为SVG中也存在一个DOM的概念——类似标准的HTML语法的原因，你也许会觉得SVG看起来十分熟悉。实际上SVG也能通过CSS进行动画制作，这无疑是一项格外有价值的特性，因为对于前端开发者来说，使用 CSS 操作标签是格外轻松的。
让我们先对CSS动画做一下简短的复习吧，创建CSS动画的第一步就是先定义两个属性。首先，让我们来看看这个动画的关键帧（keyframe）：
关于keyframe 语法的小贴士
你可以使用from 和 to 来代替百分比的定义，如果没有声明初始keyframe或者结束keyframe，那么CSS会使用元素默认声明的属性。如果需要兼容很多浏览器，那么需要反复检查你的动画帧是否漏了初始帧和结束帧，否则可能在一些浏览器中会出问题，虽然这可能是由于一些浏览器本身的bug或者标准不统一所导致的。当定义了这些keyframe的值后，有两种方式可对动画进行配置，这里有一个语法冗余的版本，它将关于动画的每一部分的定义都单独列出来进行声明：
当然这里还有一个简短版的（这是我最喜欢用的， 因为代码比较简短）：
animation 的属性是以空格分隔的，除了一些关于数字的值以外，其他有关动画属性的声明顺序是可以互换的。只能用数字值来定义的属性需要遵照这样的顺序：duration、delay和iteration count（分别代表动画的总时间、延长几秒开始和执行的次数）。
应用了上面定义的动画帧的.ball div的结构也很简单（参见图2-1）：图2-1：应用.ball div的小球
我们通过上面的代码得到了图2-2所示的结果。图2-2：CSS动画用于使用div创建的小球的结果
你可以在http://bit.ly/2lSB8KZ看到有关我创建的这个例子的完整代码。
如果你想了解有关CSS3动画属性更多的内容，例如什么是animation-fill-mode 或者CSS3中有哪些缓动函数，又或是有哪些CSS属性适用于CSS3 动画，请参考同样由O’Reilly出版社出版的、由Estelle Weyl编写的Transitions and Animations in CSS这本书。
同时你也可以参考由Dudley Storey编写的，由Apress出版社出版的Pro CSS3 Animation一书。用SVG做动画
让我们来看看用SVG代替刚刚使用的CSS和HTML来声明的小球的效果，运用上一章学过的知识，用SVG来画一个和图2-1所示一样的小球：
我们定义了一个半径为25px的小球，并且把小球的中心移动到SVG画布的(45,45)点上。画布的宽高是70×70px，所以也像刚刚CSS中声明的那样预留了20px的左上外边距。当然，我们同样也可以对
现在，如果把这个
到底发生了什么？虽然小球像我们预期的那样仍然在移动，但是变色的背景却填充了整个SVG，即整个viewbox，这显然不是我们想要的。那么如果把.ball 加给
根据这个结果，我们也大概能猜到是什么原因了：
1.
2. SVG DOM就像HTML DOM，但是它们略有不同。不允许对SVG元素使用background属性，在SVG中我们需要用到的是fill和 stroke 属性。对于SVG来说，外联样式表会覆盖
把我们的SVG DOM 稍微修改一下：
对应的CSS代码如下所示。
使用SVG代替HTML绘制小球的效果如图2-5所示。
试读结束[说明：试读内容隐藏了图片]