第 5 章文档结构

在 SVG 中使用样式

SVG 允许使用 4 种方式指定图形表现方面的信息

内联样式：将 style 属性直接写在元素上
内部样式表：将 <style> 标签通过 <def> 元素定义在 SVG 内部
外部样式表：普通的 CSS 文件
表现属性：某些样式也可通过属性实现，如 fill

分组和引用对象

`<g>` 元素

<g> 元素会将其所有子元素作为一个组合，其支持嵌套，通常还会有一个唯一的 id 作为名称。每个组合还可以拥有自己的 <title> 和 <desc> 来供基于文本的 XML 应用程序识别，或者为视障用户提供更好的可访问性

在起始 <g> 标签种指定的所有样式会应用于组合内的所有子元素

`<use>` 元素

用于复用元素，通过 xlink:href 属性指定 URI 即可，同时还需要指定 x 和 y 的位置以表示将原元素的左上角坐标移动到哪个位置

xlink:href 属性可以指定任意有效的文件或者 URI，并不限制只能使用同一文件内的对象

出于安全原因，引用外部文件时可能会出现跨域的情况

<use xlink:href="#house" x="70" y="100" />

`<defs>` 元素

SVG 规范推荐将所有想要服用的对象放置在该元素内，它们将只会定义而不会显示。其中定义的元素的左上角坐标将会位于 (0, 0) 处，这样在使用 <use> 引用时 x、y 的计算将会变得简单

`<symbol>` 元素

<symbol> 也是一种组合元素的方式，该元素永远不会显示，因此无需将其放在 <defs> 元素内。当时通常使用时还是将其放在 <defs> 元素内

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

`<image>` 元素

用于包含一个完整的 SVG 或者栅格文件，通过 xlink:href 属性指定 URI 即可

<image xlink:href="#house" x="70" y="100" width="160" height="120" />

包含一个 SVG：其视口会基于引用文件的 x、y、width、height 属性来建立
包含一个栅格文件，它会被缩放以适配该属性指定的矩形

SVG 规范要求阅读器支持 JPEG 和 PNG 两种栅格文件，大多数浏览器还支持 GIF
如果图形文件的尺寸与元素的宽度和高度不匹配，<image> 元素可以使用 preserveAspectRatio 属性指示浏览器应该如何处理，默认值为 xMidYMid meet
如果包含的是 SVG 文件，还可以添加 defer 关键字 defer xMidYMid meet，这样如果包含的文件也有 preserveAspectRatio 属性，则会使用文件的属性来替代默认值

# 第 5 章 文档结构

# 在 SVG 中使用样式

# 分组和引用对象

# <g> 元素

# <use> 元素

# <defs> 元素

# <symbol> 元素

# <image> 元素