# 1. 结构和表现

SVG 允许文档表现和文档结构分离,SVG 支持四种方式指定表现信息:内联样式、内部样式表、外部样式表以及表现属性

表现方式 说明
内联样式 元素内部使用 style 属性
内部样式表 内部样式定义在 defs 元素内部
外部样式表 html 类似,将样式定义在 css 文件中,使用选择器来设置相应的元素样式
表现属性 SVG 允许以属性的形式指定表现样式,但是表现属性的优先级最低,如果以其他三种形式指定了相同的样式属性,则将覆盖通过表现属性指定的样式

内部样式表示例:

<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg>
    <defs>
        <style type="text/css"><![CDATA[
            circle{
                fill:#ccc
            }
        ]]></style>
    </defs>
    <circle cx="10" cy="10" r="5"/>
</svg>

# 2. 分组和引用

g 元素用来将其子元素作为一个组合,可以使文档结构更清晰。除此之外,在g标签中指定的所有样式会应用于组合内的所有子元素,可以不用在所有子元素上指定属性。

use 元素用来复用图形中重复出现的元素,需要为 use 标签的 xlink:href 指定 URI 来引用指定的图形元素。同时还要指定xy属性以表示组合应该移动到哪个位置。use元素并不限制只能使用同一个文件内的对象,xlink:href属性可以指定任何有效的文件或URI

defs元素用来定义复用的元素,但是定义在defs内的元素并不会被显示,而是作为模板供其他地方使用。

symbol元素与g元素不同,symbol永远不会被显示,也可以用来指定被后续使用的元素,symbol元素可以指定 viewBoxpreserveAspectRatio 属性。在引用时通过为 use 元素指定 widthheight 属性就可以让 symbol 元素适配视口大小。

image 可以用来包含一个完整的 SVG 或栅格文件。如果包含一个 SVG 文件,则视口会基于引用的文件的 x,y,width,height 属性来建立。如果包含栅格文件则会被缩放以适配该属性指定的矩形。

SVG规范要求 SVG 阅读器支持 JPEGPNG 两种栅格文件。

最后更新: 2021/7/5 下午5:48:01