svg 第二章 文档结构

结构和表现

结构：用来告诉你这是个什么东西

表现：视觉效果

在svg中使用样式

svg允许通过：内联样式、内部样式表、外部样式以及表现属性来指定图形视觉效果。

• 内联样式：直接在标签上通过style设置样式属性
• 内部样式表：给标签指定类名，在同一个文件中，通过style标签给指定类名编写样式
• 外部样式：与内部样式一致，只不过把style标签的内容抽离出来作为一份单独的样式文件进行引入
• 表现属性：其实就是将style属性中的各种css属性键值对作为独立的属性使用

分组和引用对象

svg提供了一些元素，允许我们对元素进行分组

<g>元素

<g>元素会将其所有的子元素作为一个组合，通常组合都会有一个唯一id作为名称。每个组合还可以拥有自己的<title>和<desc>供xml应用程序识别。

<svg>
	<g id="test" style="fill: none; stroke: black;">
  	<title>test</title>
		<desc>test one</desc>
		<polyline points="6 50, 36 9, 66 50">
  </g>  
</svg>

在<g>标签上指定的样式会应用到组合内所有的子元素。

<use>元素

复杂的图形中避免不了复用的情况。svg使用<use>元素，为定义在<g>元素内的组合或独立图形提供了类似复制粘贴的功能。

<svg>
	<g id="test" style="fill: none; stroke: black;">
  	<title>test</title>
		<desc>test one</desc>
		<polyline points="6 50, 36 9, 66 50">
  </g>  
	<use xlink:href="#test" x="70" y="100">
</svg>

<defs>元素

在<defs>标签中间添加元素，相当于告诉svg，只定义，不显示。svg的规范也推荐将复用的对象放在<defs>标签中便于svg阅读器更高效地处理数据。

<use>元素不限制只能使用同一个文件中的对象。xlink:href属性可以指定任意有效的文件或者url，这就方便我们将公用元素整合在一个svg文件中，然后在其他文件中选择性地使用他们。

使用方式为：

<use xlink:href="xxx.svg#id" />

<symbol>元素

和<g>元素不同，<symbol>元素永远不会显示，因此无需将它放在<defs>元素内。

但我们习惯于将它放到<defs>中，因为symbol也是我们定义供后续使用的元素。

symbol还可以指定viewBox和preserveAspectRatio属性，通过给<use>元素添加width和height属性可以让symbol适配视口大小。

<image>元素

<use>元素允许我们复用svg文件中的一部分，而<image>元素可以包含一个完整的svg或者栅格文件。

如果包含一个svg文件，其视口会基于引用文件的x、y、width和height属性来建立。

如果包含一个栅格文件，它会被缩放以适配该属性指定的矩形。