编辑推荐
作为W3C的开放标准,SVG被越来越多的开发者所关注。SVG不只是简单的矢量图,还可以加上更复杂的绘画和更细致的效果,包括渲染、渐变、应用到文本,甚至可以添加照片。本书深入介绍SVG绘画。主要内容如下。-SVG渲染模型如何实现描边和填充-标准颜色的应用,自定义颜色,创建颜色模板-透明度的设置-如何控制线性渐变在要渲染的形状内移动-重复线性渐变-磁贴、纹理和图片图案-如何在文本上应用渲染服务-给渲染服务添加动画
内容简介
《深入理解SVG》介绍SVG绘画,包括基础知识和如何通过混合和搭配工具来生成复杂的效果。主要内容包括:把SVG代码转换为可视图形的渲染模型,如何使用颜色,透明度的控制方法以及它对图片的影响,渲染服务和渐变。 《深入理解SVG》适合所有想利用SVG提高Web体验的读者。
目录
- 第1 章 你应该知道的事 1
- 1.1 SVG 通过代码来画图 1
- 1.2 SVG 始终是开源的 2
- 1.3 SVG 是XML(有时也是HTML) 2
- 1.4 SVG 是可压缩的 2
- 1.5 图片是形状的集合 3
- 1.6 图片中可以包含图片 3
- 1.7 文本也是艺术 3
- 1.8 艺术源于数学 3
- 1.9 SVG 是无数canvas 的有限集 3
- 1.10 SVG 是有结构的 4
- 1.11 SVG 是有样式的 4
- 1.12 所有好用的标记都基于伟大的DOM 4
- 1.13 SVG 是可移动的 5
- 1.14 SVG 在发展变化 5
- 第2 章 画家模型 6
- 2.1 使用fill 属性进行填充 7
- 2.2 使用stroke 属性描边 10
- 2.3 层叠描边和填充 15
- 2.4 使用渲染提示属性 22
- 第3 章 创建颜色 26
- 3.1 使用名称生成朦胧玫瑰红 26
- 3.2 彩虹三原色 31
- 3.3 自定义颜色 34
- 3.4 混合和搭配 41
- 第4 章 透明 44
- 4.1 穿透样式 44
- 4.2 其他效果 49
- 第5 章 渲染服务 52
- 5.1 渲染和壁纸 52
- 5.2 标识资源 53
- 5.3 纯色渐变 56
- 第6 章 简单的渐变 61
- 6.1 逐步渐变 61
- 6.2 透明渐变 64
- 6.3 控制颜色变换 65
- 第7 章 各种形状和尺寸的渐变 70
- 7.1 渐变矢量 70
- 7.2 对象边界盒 74
- 7.3 在盒子表面绘制 78
- 7.4 渐变,变换 83
- 第8 章 重复 92
- 8.1 如何扩展渐变 92
- 8.2 无穷渐变映射 94
- 8.3 非映射重复 95
- 8.4 在HTML 中使用(复用)渐变 98
- 第9 章 径向渐变 111
- 9.1 径向渐变基础 111
- 9.2 填充盒子 113
- 9.3 缩放圆 117
- 9.4 调整焦点 120
- 9.5 变换径向渐变 123
- 9.6 大型渐变 124
- 第10 章 磁贴与纹理 136
- 10.1 搭积木 137
- 10.2 适当拉伸 143
- 10.3 布局磁贴 146
- 10.4 变换磁贴 151
- 第11 章 完美的图片图案 158
- 11.1 层次感 158
- 11.2 保持原始图案 162
- 11.3 SVG 样式的背景图片 165
- 第12 章 有纹理的文本 173
- 12.1 边界文本 174
- 12.2 中途切换样式 179
- 第13 章 绘制线条 184
- 13.1 超出边缘的部分 184
- 13.2 空盒子 186
- 13.3 使用坐标空间 192
- 13.4 有图案的线条 196
- 第14 章 动画 198
- 14.1 动画选项 198
- 14.2 坐标动画 204
- 14.3 交互动画 208
- 附录A 颜色关键词和语法 223
- 附录B 元素,元素属性,样式属性 229
- 作者介绍 236
- 封面介绍 236
SVG算是一种简化的HTML,CSS以及JS都可以用。把这些用在绘制矢量图上面可以理解,为什么还会有动画?如果要这样做的话为什么不用Canvas?貌似Android上对于SVG的支持是有限的。
还不如看MDN。另外svg术语感觉很乱,tiles叫磁贴,pattern叫图案,和图形学术语混得很。