深入理解SVG ( etc.) (Z-Library)

📄 File Format: PDF

💾 File Size: 6.5 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

版权信息 书名：深⼊理解SVG 作者：[美] Amelia Bellamy-Royds Kurt Cagle 译者：刘涛 ISBN：978-7-115-46758-4 本书由北京图灵⽂化发展有限公司发⾏数字版。版权所有，侵权必 究。 您购买的图灵电⼦书仅供您个⼈使⽤，未经授权，不得以任何⽅式复 制和传播本书内容。 我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产 权。 如果购买者有侵权⾏为，我们可能对该⽤户实施包括但不限于关闭该 帐号等维权措施，并可能追究法律责任。 图灵社区会员 wulianglong（1243329172@qq.com） 专享 尊重版权 版权声明 O'Reilly Media, Inc. 介绍 业界评论 前⾔

📄 Page 3

本书内容 关于本书 关于⽰例 使⽤代码⽰例 排版约定 Safari® Books Online 联系我们 致谢 电⼦书 第 1 章 你应该知道的事 1.1 SVG通过代码来画图 1.2 SVG始终是开源的 1.3 SVG是XML（有时也是HTML） 1.4 SVG是可压缩的 1.5 图⽚是形状的集合 1.6 图⽚中可以包含图⽚ 1.7 ⽂本也是艺术 1.8 艺术源于数学 1.9 SVG是⽆数canvas的有限集 1.10 SVG是有结构的 1.11 SVG是有样式的 1.12 所有好⽤的标记都基于伟⼤的DOM 1.13 SVG是可移动的 1.14 SVG在发展变化 第 2 章 画家模型 2.1 使⽤fill属性进⾏填充 2.2 使⽤stroke属性描边 2.3 层叠描边和填充 2.4 使⽤渲染提⽰属性

📄 Page 4

第 3 章 创建颜⾊ 3.1 使⽤名称⽣成朦胧玫瑰红 3.2 彩虹三原⾊ 3.3 ⾃定义颜⾊ 3.4 混合和搭配 第 4 章 透明 4.1 穿透样式 4.2 其他效果 第 5 章 渲染服务 5.1 渲染和壁纸 5.2 标识资源 5.3 纯⾊渐变 第 6 章 简单的渐变 6.1 逐步渐变 6.2 透明渐变 6.3 控制颜⾊变换 第 7 章 各种形状和尺⼨的渐变 7.1 渐变⽮量 7.2 对象边界盒 7.3 在盒⼦表⾯绘制 7.4 渐变，变换 第 8 章 重复 8.1 如何扩展渐变 8.2 ⽆穷渐变映射 8.3 ⾮映射重复 8.4 在HTML中使⽤（复⽤）渐变 第 9 章 径向渐变 9.1 径向渐变基础 9.2 填充盒⼦

📄 Page 5

9.3 缩放圆 9.4 调整焦点 9.5 变换径向渐变 9.6 ⼤型渐变 第 10 章 磁贴与纹理 10.1 搭积⽊ 10.2 适当拉伸 10.3 布局磁贴 10.4 变换磁贴 第 11 章 完美的图⽚图案 11.1 层次感 11.2 保持原始图案 11.3 SVG样式的背景图⽚ 第 12 章 有纹理的⽂本 12.1 边界⽂本 12.2 中途切换样式 第 13 章 绘制线条 13.1 超出边缘的部分 13.2 空盒⼦ 13.3 使⽤坐标空间 13.4 有图案的线条 第 14 章 动画 14.1 动画选项 14.2 坐标动画 14.3 交互动画 附录 A 颜⾊关键词和语法 附录 B 元素，元素属性，样式属性 <linearGradient> <radialGradient>

📄 Page 6

<stop> <pattern> 作者介绍 封⾯介绍 版权声明 © 2016 by O'Reilly Media,Inc. Simplified Chinese Edition, jointly published by O'Reilly Media, Inc. and Posts & Telecom Press, 2017. Authorized translation of the English edition, 2017 O'Reilly Media, Inc., the owner of all rights to publish and sell the same. All rights reserved including the rights of reproduction in whole or in part in any form. 英⽂原版由 O'Reilly Media, Inc. 出版，2016。 简体中⽂版由⼈⺠邮电出版社出版，2017。英⽂原版的翻译得到 O'Reilly Media, Inc. 的授权。此简体中⽂版的出版和销售得到出版权和 销售权的所有者——O'Reilly Media, Inc. 的许可。 版权所有，未得书⾯许可，本书的任何部分和全部不得以任何形式重 制。 O'Reilly Media, Inc. 介绍 O'Reilly Media 通过图书、杂志、在线服务、调查研究和会议等⽅式传 播创新知识。⾃ 1978 年开始，O'Reilly ⼀直都是前沿发展的⻅证者和

📄 Page 7

推动者。超级极客们正在开创着未来，⽽我们关注真正重要的技术趋 势——通过放⼤那些“细微的信号”来刺激社会对新科技的应⽤。作为 技术社区中活跃的参与者，O'Reilly 的发展充满了对创新的倡导、创造 和发扬光⼤。 O'Reilly 为软件开发⼈员带来⾰命性的“动物书”；创建第⼀个商业⽹站 （GNN）；组织了影响深远的开放源代码峰会，以⾄于开源软件运动 以此命名；创⽴了 Make 杂志，从⽽成为 DIY ⾰命的主要先锋；公司 ⼀如既往地通过多种形式缔结信息与⼈的纽带。O'Reilly 的会议和峰会 聚集了众多超级极客和⾼瞻远瞩的商业领袖，共同描绘出开创新产业 的⾰命性思想。作为技术⼈⼠获取信息的选择，O'Reilly 现在还将先锋 专家的知识传递给普通的计算机⽤户。⽆论是通过书籍出版、在线服 务或者⾯授课程，每⼀项 O'Reilly 的产品都反映了公司不可动摇的理念 ——信息是激发创新的⼒量。 业界评论 “O'Reilly Radar 博客有⼝皆碑。” ——Wired “O'Reilly 凭借⼀系列（真希望当初我也想到了）⾮凡想法建⽴了数百 万美元的业务。” ——Business 2.0 “O'Reilly Conference 是聚集关键思想领袖的绝对典范。” ——CRN “⼀本 O'Reilly 的书就代表⼀个有⽤、有前途、需要学习的主题。” ——Irish Times

📄 Page 8

“Tim 是位特⽴独⾏的商⼈，他不光放眼于最⻓远、最⼴阔的视野并且 切实地按照 Yogi Berra 的建议去做了：‘如果你在路上遇到岔路⼝，⾛ ⼩路（岔路）。’回顾过去，Tim 似乎每⼀次都选择了⼩路，⽽且有⼏ 次都是⼀闪即逝的机会，尽管⼤路也不错。” ——Linux Journal 前⾔ 本书深⼊讨论了 SVG 的⼀个特定的⽅⾯：绘画。这⾥的绘画使⽤的不 是油墨或⽔彩，⽽是可被计算机转化为有⾊像素的图形指令。本书探 讨了创建它的可能性以及潜在的⻛险。书中不仅描述了⼀些基础知 识，还介绍了如何通过混合和搭配⼯具来⽣成复杂的效果。 本书起源于⼀个介绍如何在 Web 上使⽤ SVG 的项⽬。为了保证本书篇 幅适中，并适合⼊门读者，许多细节和复杂的部分我们不再赘述。但 这些细节和复杂内容会使作为图⽚格式的 SVG 更加丰富、美妙。掌握 了 SVG 基础后，你就可以考虑去制作更加复杂的绘画和更加细致的效 果。 本书内容 如果你正在阅读本书，我们希望你已经熟悉了 SVG 的基础知识，例如 如何把图形定义为⼀系列形状，如何将图形作为⼀个单独的图⽚⽂件 或作为 HTML ⻚⾯中的标记来使⽤。如果你不确定是否已经准备好， 第 1 章会带你回顾⼀些应该知道的基础概念。 本书的剩余部分着重讲解 SVG 颜⾊、图案以及渐变。

📄 Page 9

第 2 章讨论了把 SVG 代码转换为可视图形的渲染模型，还介绍了 可以设置在形状和⽂本上以控制它们如何绘制在屏幕上的基础属 性。 第 3 章着重讲解了颜⾊：它在⾃然界中是如何⼯作的，在计算机 中⼜是如何⼯作的，以及如何在 SVG 代码中指定颜⾊。 第 4 章中讨论了透明度，更确切地说，是不透明度；还介绍了控 制图形不透明度的多种⽅法，以及它们是如何影响最终效果的。 第 5 章中介绍了渲染服务的概念：定义其他 SVG 图形和⽂本如何 被绘制到屏幕上的复杂图形内容。这⼀章还介绍了纯⾊渲染服 务，你最初可能会觉得它⽤处不⼤，但实际上却很有⽤。 第 6 章着眼于渐变，主要讲解了通过调整结点的位置和属性来创 建不同的颜⾊过渡效果。 第 7 章探讨了如何控制线性渐变在要渲染的形状内移动。 第 8 章介绍了重复线性渐变以及利⽤它们可以实现的⼀些效果， 同时还介绍了⼀些在 HTML ⻚⾯中使⽤渐变（以及其他渲染服 务）⽣成内联 SVG 图标的⽰例和⼩技巧。 第 9 章着眼于径向渐变，包括重复径向渐变，最后还给出了⼀些 使⽤多个渐变来创建复杂效果的例⼦。 第 10 章介绍了 <pattern> ，它⽤于创建重复的磁贴和纹理。 第 11 章展⽰了如何使⽤图案来定义⽤于填充形状或⽂本的单个图 像或图形。 第 12 章详细介绍了渲染服务是如何应⽤到⽂本上的。

📄 Page 10

第 13 章讨论了使⽤渲染服务绘制描边区域⽽⾮填充区域时出现的 ⼀些问题。 第 14 章给出了⼀些给渲染服务添加动画的例⼦，还讨论了在 SVG 中可⽤的不同添加动画⽅法的优点与局限。 本书最后的两个附录提供了把理论⽤到实践中时会⽤到的基本语法， 可供你快速参考。 附录 A 重述了定义颜⾊的多种⽅法，包括所有预定义的颜⾊关键 词。 附录 B 总结了所有的渲染服务元素、它们的属性，以及相关的样 式属性。 关于本书 ⽆论你是随便翻阅本书，还是从头到尾仔细阅读，理解如下⽤于提供 额外信息的⼩指南，你可以获得更多知识。 关于⽰例 SVG 图像可以使⽤许多不同类型的软件来展⽰和操作，且每个程序在 SVG 代码的解析上略有不同。尤其在图形⽂件分发在 Web 上时，这确 实是个问题；你希望⼈们在另⼀端看到的内容与你期望的效果⽆限接 近。 因此本书中的例⼦在桌⾯最新稳定版（2015 年 7 ⽉）的 Chrome、 Firefox、Internet Explorer 以及 Safari 浏览器中都进⾏了测试。缺陷、 漏洞以及浏览器的⽀持程度都在⽂本中有所注明。此外，还提到了微 软 Edge 浏览器预期在⽀持程度上的更改。

📄 Page 11

⼏乎所有其他浏览器使⽤的都是某⼀主要开源渲染库的变体：Gecko （Firefox）、WebKit（Safari 以及 iOS 设备）或 Chromium/Blink （WebKit 的⼀个分⽀，主要为 Chrome 开发）。因此，你可以以主要 浏览器的⽀持情况作为指南，但要注意的是并⾮所有软件都会同时更 新。对于移动浏览器，即使某些功能在技术上是⽀持的，但会受到实 际性能的限制。某些移动浏览器（例如 Opera Mini）会刻意限制它们 ⽀持的功能来提升性能。 SVG 还可以⽤在 Adobe Illustrator 和 Inkscape 等图形程序中。有很多⼯ 具，例如 Apache Batik 或 libRSVG，可以把 SVG 代码转换为其他⽮量 图形格式，⽐如 PDF ⽂档。这些⼯具都会有新的兼容性问题，这在本 书中没有详细介绍。⼀定要⼩⼼地在所有需要使⽤的⼯具中测试！ 使⽤代码⽰例 补充材料（代码⽰例和图形）可以从以下⽹址在线获取。 下载地址： https://github.com/oreillymedia/SVG_Colors_Patterns_Gradients 。 在线观看地址： http://oreillymedia.github.io/SVG_Colors_Patterns_Gradients/ 。 本书是要帮你完成⼯作的。⼀般情况下，如果书中提供了⽰例代码， 你可以在你的程序或⽂档中使⽤，且不⽤联系我们获得许可，除⾮你 ⼤量复制我们的代码。例如，在你的程序中使⽤本书中的⼏个代码块 不需要获得我们的许可。销售或分发 O'Reilly 图书中⽰例的 CD-ROM 需要获得许可。引⽤本书及引⽤⽰例代码来回答问题不需要获得我们 的许可。将本书中⼤量⽰例代码合并到你的产品⽂档中时需要获得许 可。

📄 Page 12

我们很希望但并不强制要求你在引⽤本书内容时加上引⽤说明。引⽤ 说明⼀般包括书名、作者、出版社和 ISBN。⽐如：“SVG Colors, Patterns & Gradients by Amelia Bellamy-Royds and Kurt Cagle (O'Reilly). Copyright 2016 Amelia Bellamy-Royds and Kurt Cagle, 978-1-4919-3374- 9.” 如果你觉得对代码⽰例的使⽤不属于合理使⽤或超出了上述许可范 围，请随时通过 permissions@oreilly.com 联系我们。 排版约定 本书使⽤的排版约定如下。 楷体 表⽰新术语。 等宽字体 （constant width ） 表⽰程序⽚段，以及正⽂中出现的变量、函数名、数据库、数据 类型、环境变量、语句和关键字等。 加粗等宽字体 （ constant width bold ） 表⽰应该由⽤户输⼊的命令或其他⽂本。 等宽斜体 （ Constant width italic ） 表⽰应该由⽤户输⼊的值或根据上下⽂确定的值替换的⽂本。  该图标⽤于突出 SVG 中特别复杂的部分，或初看不太明显的简 单的快捷⽅式。  

📄 Page 13

 该图标表⽰⼀般的注记和有趣的背景信息。    这样的警告信息将⽤于突出不同浏览器（或其他软件）之间， 或 SVG 作为 XML ⽂件和在 HTML ⻚⾯中使⽤ SVG 之间的兼容性问 题。 除此之外，如下样式将⽤于补充信息。 简介 本书中使⽤了两种类型的附注栏。“聚焦未来”将讨论尚未标准化 的拟定功能，或还没有⼴泛实施的新标准。“CSS 与 SVG”将 SVG 图形效果和创建相似效果的 CSS 样式（如果有的话）进⾏⽐较。 虽然附注栏对于理解 SVG 颜⾊、图案和渐变并不是必要的，但在规划 ⼀个完整的 Web 项⽬时它们可能会添加重要的上下⽂。 Safari® Books Online Safari Books Online（http://www.safaribooksonline.com ）是应运⽽⽣的 数字图书馆。它同时以图书和视频的形式出版世界顶级技术和商务作 家的专业作品。技术专家、软件开发⼈员、Web 设计师、商务⼈⼠和 创意专家等，在开展调研、解决问题、学习和认证培训时，都将 Safari Books Online 视作获取资料的⾸选渠道。

📄 Page 14

对于组织团体、政府机构和个⼈，Safari Books Online 提供各种产品组 合和灵活的定价策略。⽤户可通过⼀个功能完备的数据库检索系统访 问 O'Reilly Media、Prentice Hall Professional、Addison-Wesley Professional、Microsoft Press、Sams、Que、Peachpit Press、Focal Press、Cisco Press、John Wiley & Sons、Syngress、Morgan Kaufmann、 IBM Redbooks、Packt、Adobe Press、 FT Press、Apress、Manning、 New Riders、McGraw-Hill、Jones & Bartlett、 Course Technology 以及 其他⼏⼗家出版社的上千种图书、培训视频和正式出版之前的书稿。 要了解 Safari Books Online 的更多信息，我们⽹上⻅。 联系我们 请把对本书的评价和问题发给出版社。 美国：   O'Reilly Media, Inc.   1005 Gravenstein Highway North   Sebastopol, CA 95472 中国：   北京市⻄城区⻄直门南⼤街 2 号成铭⼤厦 C 座 807 室（100035）   奥莱利技术咨询（北京）有限公司 O'Reilly 的每⼀本书都有专属⽹⻚，你可以在那⼉找到本书的相关信 息，包括勘误表、⽰例代码以及其他信息。本书的⽹站地址是：   http://bit.ly/svg-colors-patterns-and-gradients

📄 Page 15

对于本书的评论和技术性问题，请发送电⼦邮件到：   bookquestions@oreilly.com 要了解更多 O'Reilly 图书、培训课程、会议和新闻的信息，请访问以下 ⽹站：http://www.oreilly.com 我们在 Facebook 的地址如下：http://facebook.com/oreilly 请关注我们的 Twitter 动态：http://twitter.com/oreillymedia 我们的 YouTube 视频地址如下：http://www.youtube.com/oreillymedia 致谢 如果没有 O'Reilly 的编辑们——Simon St. Laurent、Meghan Blanchette 以及 Meg Foley（排名不分先后）——的耐⼼与坚持，这本书永远不会 出版。⾮常感谢技术审查⼈员，是他们尽最⼤努⼒减少错误的数量并 修改难以理解的表述，最终使本书达到出版质量要求，他们是：David Eisenberg、Dudley Storey、Robert Longson 以及 Sarah Drasner。 感谢 O'Reilly 团队，是他们使最终成书精美且专业。尤其感谢 Sanders Kleinfeld 调整 Pygmentize 语法来⾼亮显⽰ SVG 代码，感谢制作编辑 Colleen Lobner 应对了许多⾃定义请求。 还要感谢⼴泛的 SVG 开发者社区，包括那些使⽤ SVG 的开发⼈员和 构建基础软件的开发⼈员。本书中许多⾼亮的提⽰、技巧、警告都是 从其他⼈分享的博客⽂章、现场演⽰、问答论坛以及邮件列表等中收 集的。 电⼦书

📄 Page 16

扫描如下⼆维码，即可购买本书电⼦书。 第 1 章 你应该知道的事 本书假设你已经了解过 SVG、⽹⻚设计，甚⾄有 JavaScript 编程基 础。 每⼀种语⾔都有⾃⼰的⼀些缺陷，⽽这些缺陷对有些开发者来说很明 确，但对其他同样优秀的开发者来说却闻所未闻。所以本章将带你⼀ 起快速回顾⼀些你必须知道的东⻄。 1.1 SVG通过代码来画图 SVG 就是⼀个图⽚⽂件。我们可以像使⽤ PNG 或 JPEG 等图⽚⽂件⼀ 样使⽤它，可以在可视化编辑器中创建和编辑 SVG，也可以将其作为 图⽚嵌⼊到⽹⻚中。

📄 Page 17

但是 SVG 并不仅仅是图⽚，它是包含标记元素、⽂本、样式指令的结 构化⽂档。其他图⽚格式是告诉计算机在屏幕上哪⼀点应该绘制什么 颜⾊，⽽ SVG 是告诉计算机如何通过它的组成部分重组图形。这产⽣ 以下两个主要结果。 SVG 最终在屏幕上的显⽰依赖于软件对 SVG 规范的⽀持程度。跨 浏览器的兼容性往往是⼀个问题。 对 SVG 的⼀部分单独进⾏增加、删除、修改的操作是⾮常容易 的，不⽤担⼼会改变 SVG 的其他部分。我们可以在编辑器中进⾏ 此类操作，也可以动态地在⽹⻚中制作动画或交互图形。 1.2 SVG始终是开源的 SVG 不仅仅是⼀组计算机编码指令，它还是⼈类可读的⽂本⽂件。你 不仅可以在⽂本编辑器中编辑 SVG，甚⾄还可以在有语法⾼亮和⾃动 补全功能的代码编辑器中编辑它。 本书的所有例⼦都专注于基本的 SVG 代码。当然你也可以通过可视化 编辑器来画形状、选颜⾊、调整图形展现的其他部分。但是为了完全 可控，你需要看⼀看编辑器实际创建的代码。 1.3 SVG是XML（有时也是HTML） ⽂本编辑器中的 SVG 代码看起来⾮常像 HTML 代码（全是尖括号和属 性），但是单独的 SVG ⽂件通常被解析为 XML。这意味着你的 SVG 通常都可以被 XML ⼯具解析和操控，也意味着如果你忘记引⼊ XML 的命名空间或者混淆了 XML 语法的重要细节，你的⽹⻚将什么都不显 ⽰。 然⽽，当你直接在 HTML5 标记中插⼊ SVG 时，它将由 HTML 解析器 处理。HTML 解析器会忽略⼀些错误（⽐如缺少结束标签或使⽤不带

📄 Page 18

引号的属性），⽽在 XML 解析器（或⼤多数仅⽀持 SVG 的图形编辑 器）中这将导致解析失败。它也会忽略⾃定义的命名空间，将不能识 别的属性或标签名变成⼩写，甚⾄引起其他不能预期的变化。 1.4 SVG是可压缩的 SVG 的⼤部分语法的设计都是为了使其易于阅读和理解，⽽不是为了 结构紧凑，这使得某些 SVG ⽂件看起来相当冗⻓和冗余。但是，这也 使得 SVG ⾮常适合通过 gzip 压缩，⽽⽹⻚中的 SVG 都应该被压缩。 通常，这将使⽂件⼤⼩减少⼀半甚⾄更多。在普通的⽂件服务器上存 储压缩过的 SVG 时，通常使⽤ .svgz 作为扩展名。 SVG 也是容易臃肿的，这也在另⼀⽅⾯使它可压缩。⼤多数 SVG 编辑 器通过给定唯⼀的 XML 命名空间，在 SVG ⽂件中添加⾃⼰的元素和 属性。有些优化⼯具开发了在不影响最终结果的基础上把代码剥离出 来的功能。在使⽤这些⼯具时，如果你⾃⼰操作了代码，配置的时候 就要特别⼩⼼，优化⼯具有可能会删除掉你以后想要使⽤的属性。 1.5 图⽚是形状的集合 那么这所有的代码想要表现的是什么呢？当然是形状！（也可能是⽂ 本或嵌⼊的图像，这些我们将在后⾯介绍。）SVG 只有少数不同的形 状元素：<rect> 、<circle> 、<ellipse> 、<line> 、 <polyline> 、<polygon> 以及 <path> 。但是，最后三种能够以 ⼀定的精确度，定制你能想象的任何形状。特别是 <path> ，我们可 以通过它⾃⼰的特性来描绘曲线和线条，以此来创建形状。 1.6 图⽚中可以包含图⽚

📄 Page 19

每个 SVG 都是⼀张图⽚，但是它同时也是⼀个⽂档，⽂档中可以通过 使⽤ <image> 标签来包含其他图⽚。嵌⼊的图⽚可以是其他 SVG ⽂ 件，也可以是 PNG 或 JPEG 等光栅图⽚。然⽽，出于安全和性能的考 虑，SVG 有时⽤于避免外部图⽚（以及其他外部资源，⽐如样式表和 字体）被下载。尤其是当 SVG 在 HTML ⻚⾯中作为嵌⼊图⽚（<img> 元素）或者背景图⽚被显⽰时，我们将不能使⽤外部⽂件。 1.7 ⽂本也是艺术 SVG 的最后⼀个⽤途是构建⽂本。但是⽂本不是图形的替代，构成⽂ 本的字⺟将会像其他类型的⽮量图形⼀样被处理。尤为重要的是，⽂ 本可以使⽤与⽮量形状完全相同的样式属性来绘制。 1.8 艺术源于数学 所有⽮量图形（形状或⽂本）的核⼼是，使⽤每个元素的浏览器 SVG 渲染函数中的数学参数（XML 属性），控制最终效果。SVG 中最基本 的数学概念是坐标系，⽤于确定图形中每⼀个点的位置。我们可以通 过设置 viewBox 属性来设置初始坐标系，然后通过坐标系的转换来移 动、拉伸、旋转、倾斜特定元素。 1.9 SVG是⽆数canvas的有限集 在计算机精度允许的范围内，可以给⽮量形状添加任意多个坐标。不 过最终显⽰的是 viewBox 属性建⽴的特定范围坐标内的形状。通过给 preserveAspectRatio 设置不同的值来控制在宽⾼⽐不匹配时，如 何把坐标的范围缩放到视图区域（viewport）。 嵌套 <svg> 元素或复⽤ <symbol> 元素可以创建嵌套的视⼝，它们除 了提供控制宽⾼⽐的区域外，还定义了确定⼦元素百分⽐值的依据。

📄 Page 20

其他元素还可以使⽤ viewBox 属性来创建⼀个伸缩到合适⼤⼩的效果 （我们将在第 11 章的 <pattern> 元素中学习），⽽不⽤重新去定义 百分⽐。 1.10 SVG是有结构的 SVG 的结构包括渲染到屏幕上的基本形状、⽂本和图⽚以及⽤来定义 ⼏何图形的属性。我们可以按照逻辑来把元素进⾏分组，以此来创建 更加丰富的 SVG。我们可以给不同的组设置不同的样式或者转换其坐 标系，还可以给它们添加可访问名称和描述来解释图形到底表⽰什 么。 1.11 SVG是有样式的 SVG 图形可以仅仅由所有的样式信息都通过属性来设置的 XML 元素 组成。当然，这些和表现相关的样式也可以通过 CSS 规则来设定，⽐ 如通过 class 或者元素类型来控制。还可以使⽤媒体属性或瞬时状态等 有条件的 CSS 样式，⽐如 :hover 和 :focus 。 严格分开⼏何结构（XML 属性）和表现样式（表现属性或者 CSS 样式 规则）是有些武断的。随着 SVG 的发展，这两者之间的界限将越来越 模糊。 SVG 2 的规范草案把许多布局属性升级为表现属性。这便可以 通过灵活的 CSS 语法来提供以下特性：通过类给相似元素设置⼀个差 不多的尺⼨，然后再通过 CSS 伪类或媒体查询来修改具体的尺⼨或布 局。 1.12 所有好⽤的标记都基于伟⼤的DOM 浏览器会把 SVG 标记和样式转换成⼀个⽂档对象模型（document object model，DOM）。DOM 可以通过 JavaScript 进⾏操作。针对