一. SVG是什么?
- SVG 意为可缩放矢量图形(Scalable Vectors Graphics)。
- SVG 图形在放大或者改变尺寸的情况下,其图形的质量不会有所损失。
- SVG 使用 XML 格式定义图形。
- SVG 文件是纯粹的 XML。
- SVG 是万维网联盟的标准。
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体。
二. 代码解释(书p138实例)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
- XML
Extentsible Markup Language(可扩展标记语言),用来定义其它语言的一种元语言,其前身是SGML(标准通用标记语言)。它没有标签集(tag set),也没有语法规则(grammatical rule),但是它有句法规则(syntax rule)。
▲XML和HTML的区别
① XML不是HTML的替代品,XML和HTML是两种不同用途的语言。
② XML是用来描述数据的,重点是:什么是数据,如何存放数据。
③ HTML是用来显示数据的,重点是:显示数据以及如何显示数据更好上面。
④ HTML是与显示信息相关的, XML则是与描述信息相关的。
-
version="1.0"
定义所使用的SVG版本 -
standalone="no"
standalone 这个属性规定这个 SVG 文件是否是“独立的”,还是有引用外部文件。standalone="no" 意味着 SVG 文件不是独立的,会引用外部文件。
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
-
width="198px" height="188px" viewBox="0 0 198 188"
SVG的根元素:width、height和viewbox属性
▲viewbox(视框)
解释 | 定义了SVG中所有形状都需要遵循的坐标系 |
---|---|
值 | 包含4个参数的列表 min-x, min-y, width and height, 以空格或者逗号分隔开 |
属性 | △preserveAspectRatio属性表示是否强制进行统一缩放 |
可用元素 | <svg><symbol><image><marker><pattern><view> |
▲▲▲ 命名空间
-
xmlns="http://www.w3.org/2000/svg"
https://www.w3.org/2000/svg是一个XML名称空间,最早在SVG1.0规范中定义,随着2.0/3.0等版本更新其名称是可变的。随着W3C技术报告的发布逐渐添加名称。 -
xmlns:xlink="http://www.w3.org/1999/xlink"
https://www.w3.org/1999/xlink是XML链接语言(XLink)规范中定义的XML名称空间 。 - 声明命名空间
<svg xmlns="http://www.w3.org/2000/svg">
<!-- more tags here -->
</svg>
命名空间声明由xmlns属性提供。此属性表示<svg>标记及其子标记属于名称空间为“http://www.w3.org/2000/svg”的XML方言,当然,它是SVG。注意,命名空间声明只需要在根标记上提供一次。声明定义了默认命名空间,因此用户代理知道所有<svg>标签的后代标签也属于同一命名空间。用户代理检查他们是否属于同一个命名空间,如果是的话才去如何处理命名空间下的标签标记。
注意,命名空间名称只是字符串,尽管SVG命名空间名称看起来像URI,但这并不重要。URI通常被使用,因为它们是唯一的,目的不是“链接”某处。(事实上,URI经常使用,通常使用术语“命名空间URI”而不是“命名空间名称”。)
- 重新声明默认命名空间
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<!-- some XHTML tags here -->
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<!-- some SVG tags here -->
</svg>
<!-- some XHTML tags here -->
</body>
</html>
在此示例中,根<html>标签上的xmlns属性将默认名称空间声明为XHTML。因此,除了<svg>标记,用户代理将其及其所有子标记解释为属于XHTML。 <svg>标记具有自己的xmlns属性,通过重新声明默认命名空间,这告诉用户代理,<svg>标记及其后代(除非他们也重新编写默认命名空间)属于SVG。
- 声明命名空间前缀
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>
命名空间前缀用于前缀属性名称和标签名称。这是通过在属性名称之前放置命名空间前缀和冒号来实现的,如上例中的<script>标记所示。这告诉用户代理该特定属性属于分配给命名空间前缀(XLink)的命名空间,并且它是可以用于具有相同含义的其他标记上。
请注意,使用未绑定到命名空间名称前缀是XML错误。尽管xlink:href属性不会导致错误,但上面示例中由xmlns:xlink属性创建的绑定是绝对必要的。这个XLink属性在SVG中经常在<a>,<use>和<image>标签等中使用,所以最好在文档中始终包含XLink声明。
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-
stroke
图形轮廓的颜色
stroke-width
图形轮廓的宽度
这两个属性控制图形的轮廓该怎么显示。这里把圆形的轮廓设置为 1px 宽,边框无填充颜色。 -
fill
填充颜色(设置形状内的颜色) -
fill-rule
填充规则
解释 | 如何判断路径的哪一侧在路径所构成的形状的内部,从而判断fill 属性如何给这个形状上色。 |
---|---|
类别 | 外观属性 |
值 | nonzero / evenodd / inherit |
-
nonzero
这个值确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线,然后检测形状与射线相交的位置。开始于0数,射线上每次从左向右相交就加1,每次从右向左相交就减1。数一下相交次数,如果结果是0,点就在路径外面,否则认为,点在路径里面。
-
evenodd
这个值用确定了某点属于该形状的“内部”还是“外部”。从点向任意方向的无限远处绘制射线,并数一数给定形状与射线相交的路径段的数目,如果数目是奇数的,点在内部,如果数目是偶数的,点在外部。
- DTD文件类型
DTD一共有三大类型:
(1)严格型的DTD
在严格型的DTD中,不能再使用各种表现的标记。如:<font>、<b>、<body bgColor>
要求必须使用CSS来取代各种表现标记。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(2)过渡型的DTD
在过渡型的DTD中,可以继续使用HTML中的表现的写法。
这些表现标记,还可以继续使用。如:<font>、<b>、<body bgColor> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(3)框架的DTD
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
三. 在web页面中插入SVG
- 使用img标签
<img src="xxxx.svg" alt="对图片的文字描述">
- 使用object标签
<object data="img/svgfile.svg" type="image/svg+xml">
data属性是你链接SVG资源的方式
type属性描述了内容的MIME类型
image/svg+xml是SVG的MIME类型(互联网媒体类型:其消息能包括文本、图像、音频、视频以及其他应用程序专用的数据)
- 把SVG作为背景图像插入
-
内联
四. 添加样式和动画
- 使用外部样式表为SVG添加样式
1. <link href="styles.css" type="text/css" rel="stylesheet"/>
2. <?xml-stylesheet href="styles.css" type="text/css"?> ◀better!
- 使用内联样式为SVG添加样式
<defs>
<style type="text/css">
<![CDATA[
#star_path {
stroke: red;
}
]]>
</style>
</defs>
- 用CSS为SVG添加动画
animation-动画
.star_Wrapper {
animation: spin 2s 1s;
transform-origin: 50% 50%;
}