第 8 章：坐标系统、变换和单位

所有 SVG 内容均绘制在 SVG 视口内。 每个 SVG 视口定义了一个绘图区域，其特征包括大小 （宽度、高度）和原点，单位为抽象的 用户单位。

请注意，SVG 视口一词与 CSS 中的 "视口" 一词是不同的。

初始视口是一个顶级 SVG 视口，它在包含环境（例如，Web 浏览器中的 CSS 像素）和 用户单位之间建立映射。建立初始视口的详细信息在 初始视口中描述。

SVG 视口仅由元素建立。有关哪些元素生成视口的信息，请参见 建立新的 SVG 视口。

每个 SVG 视口生成一个 视口坐标系统 和一个 用户坐标系统， 初始时是相同的。 在视口元素上提供 ‘viewBox’ 会相对于视口坐标系统转换用户坐标系统，具体描述见 ‘viewBox’ 属性。 视口的子元素可以进一步修改 用户坐标系统，例如通过指定 transform 属性。

SVG 视口可以嵌套。百分比单位是相对于最近的祖先 SVG 视口的宽度和高度来解析的。 因此，嵌套 SVG 视口提供了重新定义百分比单位含义的机会，并为“适应”相对于特定矩形区域的图形提供了新的参考矩形。

SVG 视口的宽度、高度和原点由生成 SVG 视口的 SVG 文档片段与该片段的父元素（无论是真实的还是隐式的）之间的协商过程确定。 有关该协商过程的描述，请参见 建立新的 SVG 视口。

默认情况下，嵌套 SVG 视口的 视口坐标系统 等价于父元素的局部坐标系统，由 SVG 视口元素的原点进行平移。然而，SVG 视口元素上的 transform 属性将修改 视口坐标系统，相对于父元素的用户坐标系统。

抽象而言，所有 SVG 视口都嵌入在 画布中， 这是一个在所有相关维度上无限大的绘图区域。

8.2. 计算 SVG 视口的等效变换

该过程将 viewBox 属性的 min-x、min-y、宽度和高度值、定义 viewBox 属性的元素的位置和大小，以及该元素的 preserveAspectRatio 属性值转换为应用于该元素包含的内容的平移和缩放。

1. 让 vb-x、vb-y、vb-width、vb-height 分别为 viewBox 属性的 min-x、min-y、宽度和高度值。
2. 让 e-x、e-y、e-width、e-height 分别为元素的位置和大小。
3. 让 align 为 preserveAspectRatio 的对齐值，如果未定义则为 'xMidYMid'。
4. 让 meetOrSlice 为 preserveAspectRatio 的 meetOrSlice 值，如果未定义或缺少此值则为 'meet'。
5. 将 scale-x 初始化为 e-width/vb-width。
6. 将 scale-y 初始化为 e-height/vb-height。
7. 如果 align 不是 'none' 且 meetOrSlice 是 'meet'，则将 scale-x 和 scale-y 中的较大值设置为较小值。
8. 否则，如果 align 不是 'none' 且 meetOrSlice 是 'slice'，则将 scale-x 和 scale-y 中的较小值设置为较大值。
9. 将 translate-x 初始化为 e-x - (vb-x * scale-x)。
10. 将 translate-y 初始化为 e-y - (vb-y * scale-y)
11. 如果 align 包含 'xMid'，则将 (e-width - vb-width * scale-x) / 2 加到 translate-x。
12. 如果 align 包含 'xMax'，则将 (e-width - vb-width * scale-x) 加到 translate-x。
13. 如果 align 包含 'yMid'，则将 (e-height - vb-height * scale-y) / 2 加到 translate-y。
14. 如果 align 包含 'yMax'，则将 (e-height - vb-height * scale-y) 加到 translate-y。

应用于该元素包含的内容的变换为 translate(translate-x, translate-y) scale(scale-x, scale-y)。

8.5. ‘transform’ 属性

用户代理必须支持 transform 属性和 呈现属性，如 [css-transforms-1] 中定义的那样。

8.6. ‘viewBox’ 属性

名称	值	初始值	可动画
viewBox	[<min-x>,? <min-y>,? <width>,? <height>]	未指定的情况。	是

<min-x>, <min-y>, <width>, <height> = <number>

对‘svg’元素的变换有点特殊，因为‘viewBox’属性。变换应当应用于‘svg’仿佛其有一个设置了该变换的父元素。

决议：变换属性在概念上适用于'`svg`'元素外部，且在视觉效果上没有展示属性和样式属性的区别。

与‘viewBox’ 属性结合使用的‘preserveAspectRatio’属性， 提供了将SVG视口拉伸以适应特定容器元素的能力。

‘viewBox’ 属性的值是一个由四个数字<min-x>、<min-y>、<width>和<height>组成的列表，数字之间用空格和/或逗号分隔，指定一个用户空间中的矩形，该矩形应映射到给定元素建立的SVG视口的边界，考虑到‘preserveAspectRatio’属性。 ‘viewBox’属性的存在导致对视口坐标系统应用变换，具体描述见计算SVG视口的等效变换。

<width>或 <height>的负值是错误的，会使‘viewBox’属性无效。零值禁用元素的渲染。

示例 ViewBox 说明了在最外层svg元素上使用‘viewBox’属性来指定SVG内容应拉伸以适应SVG视口的边界。

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">
  <desc>示例 ViewBox - 使用 viewBox
   属性自动创建一个初始用户坐标系统，使得图形无论SVG视口的大小如何，都能缩放以适应SVG视口。</desc>
  <!-- 该矩形在用户坐标系统中从(0,0)到(1500,1000)。
       因为上面的viewBox属性，该矩形将填充为SVG内容保留的整个区域。 -->
  <rect x="0" y="0" width="1500" height="1000"
        fill="yellow" stroke="blue" stroke-width="12"  />
  <!-- 一个大型红色三角形 -->
  <path fill="red"  d="M 750,100 L 250,900 L 1250,900 z">
  <!-- 一串跨越大部分SVG视口的文本 -->
  <text x="100" y="600" font-size="200" font-family="Verdana" >
    拉伸以适应
  </text>
</svg>

示例 ViewBox

渲染到 SVG视口， 宽度=300px, 高度=200px		渲染到 SVG视口， 宽度=150px, 高度=200px

以SVG格式查看此示例（仅支持SVG的浏览器）
 

‘viewBox’属性的效果是用户代理自动提供适当的变换矩阵，将指定的用户坐标系统中的矩形映射到指定区域的边界（通常是SVG视口）。为了实现左侧示例的效果，SVG视口尺寸为300x200像素，用户代理需要自动插入一个将X和Y均缩放0.2的变换。这个效果等同于有一个300px宽和200px高的SVG视口，以及以下补充变换：

<?xml version="1.0" standalone="no"?>
<svg width="300px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.2)">
    <!-- 其余文档内容在此 -->
  </g>
</svg>

为了实现右侧示例的效果，SVG视口尺寸为150x200像素，用户代理需要自动插入一个将X缩放0.1和Y缩放0.2的变换。这个效果等同于有一个150px宽和200px高的SVG视口，以及以下补充变换：

<?xml version="1.0" standalone="no"?>
<svg width="150px" height="200px"
     xmlns="http://www.w3.org/2000/svg">
  <g transform="scale(0.1 0.2)">
    <!-- 其余文档内容在此 -->
  </g>
</svg>

如果同时应用了 transform（或 ‘patternTransform’） 和 ‘viewBox’， 则会建立两个新的坐标系统。transform 为元素建立第一个新的 坐标系统。‘viewBox’ 为该元素的所有后代建立第二个坐标系统。第一个坐标系统会被第二个坐标系统后乘。

与 transform 属性不同， 由于 ‘viewBox’ 创建的自动变换 不会影响 ‘x’、‘y’、‘width’ 和 ‘height’ 属性（或在 ‘marker’ 元素的情况下， ‘markerWidth’ 和 ‘markerHeight’ 属性）在具有 ‘viewBox’ 属性的元素上。因此，在上面的示例中，展示了一个 ‘svg’ 元素，其具有 width 和 height 表现属性，以及一个 ‘viewBox’ 属性， width 和 height 表示在 应用 ‘viewBox’ 变换之前 存在的坐标系统中的值。另一方面，像 transform 属性一样，它确实为所有其他属性和 后代元素建立了一个新的坐标系统。

8.7. ‘preserveAspectRatio’ 属性

名称	值	初始值	可动画
preserveAspectRatio	<align> <meetOrSlice>?	xMidYMid meet	是

<align> =
    none
    | xMinYMin | xMidYMin | xMaxYMin
    | xMinYMid | xMidYMid | xMaxYMid
    | xMinYMax | xMidYMax | xMaxYMax

<meetOrSlice> = meet | slice

指示是否强制均匀缩放。适用于所有建立新SVG视口的元素（参见建立SVG视口的元素），以及 ‘image’、 ‘marker’、 ‘pattern’和 ‘view’元素

在某些情况下，通常在使用‘viewBox’属性时，希望图形伸展以不均匀地填充整个SVG视口。在其他情况下，希望使用均匀缩放，以保持图形的宽高比。

对于建立新SVG视口的元素（参见建立SVG视口的元素），以及 ‘marker’、 ‘pattern’和 ‘view’元素， ‘preserveAspectRatio’仅在同一元素的‘viewBox’上提供值时适用。对于这些元素，如果未提供‘viewBox’属性，则‘preserveAspectRatio’将被忽略。

对于‘image’元素， ‘preserveAspectRatio’指示参考图像应如何根据参考矩形进行适配，以及是否应保持参考图像相对于当前用户坐标系统的宽高比。

参数<align>指示是否强制均匀缩放，以及如果强制，则在宽高比不匹配SVG视口时使用的对齐方法。参数<align>必须是以下字符串之一：

• none - 不强制均匀缩放。必要时非均匀缩放给定元素的图形内容，使该元素的边界框恰好与SVG视口矩形匹配。
  （注意：如果<align>为none，则可选的<meetOrSlice>值将被忽略。）
• xMinYMin - 强制均匀缩放。
  将元素的<min-x>与SVG视口的最小X值对齐。
  将元素的<min-y>与SVG视口的最小Y值对齐。
• xMidYMin - 强制均匀缩放。
  将元素的‘viewBox’的中点X值与SVG视口的中点X值对齐。
  将元素的<min-y>与SVG视口的最小Y值对齐。
• xMaxYMin - 强制均匀缩放。
  将元素的<min-x>+<width>与SVG视口的最大X值对齐。
  将元素的<min-y>与SVG视口的最小Y值对齐。
• xMinYMid - 强制均匀缩放。
  将元素的<min-x>与SVG视口的最小X值对齐。
  将元素的中点Y值与SVG视口的中点Y值对齐。
• xMidYMid（初始值） - 强制均匀缩放。
  将元素的中点X值与SVG视口的中点X值对齐。
  将元素的中点Y值与SVG视口的中点Y值对齐。
• xMaxYMid - 强制均匀缩放。
  将元素的<min-x>+<width>与SVG视口的最大X值对齐。
  将元素的中点Y值与SVG视口的中点Y值对齐。
• xMinYMax - 强制均匀缩放。
  将元素的<min-x>与SVG视口的最小X值对齐。
  将元素的<min-y>+<height>与SVG视口的最大Y值对齐。
• xMidYMax - 强制均匀缩放。
  将元素的中点X值与SVG视口的中点X值对齐。
  将元素的<min-y>+<height>与SVG视口的最大Y值对齐。
• xMaxYMax - 强制均匀缩放。
  将元素的<min-x>+<width>与SVG视口的最大X值对齐。
  将元素的<min-y>+<height>与SVG视口的最大Y值对齐。

<meetOrSlice> 参数是可选的，如果提供，它与<align>值之间用一个或多个空格分隔，然后必须是以下字符串之一：

• meet（默认值） - 以如下方式缩放图形：

  • 保持纵横比
  • 整个‘viewBox’在SVG视口内可见
  • 尽可能多地缩放‘viewBox’，同时满足其他条件

  在这种情况下，如果图形的纵横比与SVG视口不匹配，某些SVG视口将超出‘viewBox’的边界（即，‘viewBox’将绘制的区域将小于SVG视口）。

• slice - 以如下方式缩放图形：

  • 保持纵横比
  • 整个SVG视口由‘viewBox’覆盖
  • 尽可能少地缩放‘viewBox’，同时满足其他条件

  在这种情况下，如果‘viewBox’的纵横比与SVG视口不匹配，部分‘viewBox’将超出SVG视口的边界（即，‘viewBox’将绘制的区域大于SVG视口）。

示例 PreserveAspectRatio 说明了‘preserveAspectRatio’的各种选项。示例通过在最外层svg元素内部嵌入‘svg’子元素创建几个新的SVG视口（参见建立新的SVG视口）。

<svg width="450px" height="300px" xmlns="http://www.w3.org/2000/svg">

  <desc>示例 PreserveAspectRatio - 说明preserveAspectRatio属性</desc>

  <style type="text/css">
    text { font-size: 9; }
    rect { fill: none; stroke: blue; }
  </style>

  <defs>
    <g id="smile">
      <rect x='.5' y='.5' width='29' height='39' style="fill:black;stroke:red">
      <circle cx='15' cy='20' r='10'  fill='yellow'/>
      <circle cx='12' cy='17' r='1.5' fill='black'/>
      <circle cx='17' cy='17' r='1.5' fill='black'/>
      <path d='M 10 24 A 8 8 0 0 0 20 24' stroke='black' stroke-width='2'/>
    </g>
  </defs>

  <rect x="1" y="1" width="448" height="298">

  <text x="10" y="30">SVG to fit</text>
  <g transform="translate(20,40)"><use href="#smile" /></g>

  <text x="10" y="110">Viewport 1</text>
  <g transform="translate(10,120)"><rect x='.5' y='.5' width='49' height='29'/></g>

  <text x="10" y="180">Viewport 2</text>
  <g transform="translate(20,190)"><rect x='.5' y='.5' width='29' height='59'/></g>

  <g id="meet-group-1" transform="translate(100, 60)">
    <text x="0" y="-30">--------------- meet ---------------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(0,70)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="50" height="30">
        <use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="meet-group-2" transform="translate(250, 60)">
    <text x="0" y="-30">---------- meet ----------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect  x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50, 0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100, 0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax meet" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-1" transform="translate(100, 220)">
    <text x="0" y="-30">---------- slice ----------</text>
    <g>
      <text y="-10">xMin*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(50,0)">
      <text y="-10">xMid*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(100,0)">
      <text y="-10">xMax*</text>
      <rect x='.5' y='.5' width='29' height='59'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="30" height="60">
	<use href="#smile" />
      </svg>
    </g>
  </g>

  <g id="slice-group-2" transform="translate(250, 220)">
    <text x="0" y="-30">--------------- slice ---------------</text>
    <g>
      <text y="-10">*YMin</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMinYMin slice" viewBox="0 0 30 40"
           width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(70,0)">
      <text y="-10">*YMid</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
    <g transform="translate(140,0)">
      <text y="-10">*YMax</text>
      <rect x='.5' y='.5' width='49' height='29'/>
      <svg preserveAspectRatio="xMaxYMax slice" viewBox="0 0 30 40" width="50" height="30">
	<use href="#smile" />
      </svg>
    </g>
  </g>
</svg>

示例 PreserveAspectRatio

8.8. 建立新的SVG视口

在SVG内容中包含一个‘svg’元素 将创建一个新的SVG视口，所有包含的图形将在此视口中绘制；这隐式地建立了一个新的视口坐标系统和一个新的用户坐标系统。 此外，由于建立了一个新的SVG视口，因此其中的百分比单位也有了新的含义（参见单位）。

新的SVG视口的边界由建立新SVG视口的元素上的‘x’、‘y’、‘width’和‘height’属性定义，例如一个‘svg’元素。新的视口坐标系统和新的用户坐标系统 的原点位于（‘x’，‘y’），其中‘x’和‘y’表示建立SVG视口的元素上相应属性的值。新的 视口坐标系统和新的用户坐标系统的方向与建立SVG视口的元素的当前用户坐标系统的方向相对应。 在新的视口坐标系统和新的用户坐标系统中，一个单位的大小与建立SVG视口的元素的当前用户坐标系统中一个单位的大小相同。

<?xml version="1.0" standalone="no"?>
<svg width="4in" height="3in"
     xmlns="http://www.w3.org/2000/svg">
  <desc>此SVG绘图嵌入另一个，从而建立新的SVG视口
  </desc>
  <!-- 以下语句建立新的SVG视口
       并将SVG绘图B渲染到该SVG视口 -->
  <svg x="25%" y="25%" width="50%" height="50%">
     <!-- 绘图B在这里 -->
  </svg>
</svg>

以下元素建立新的SVG视口：

• 元素‘svg’
• 由‘symbol’元素实例化的 ‘use’元素。

出于历史原因，‘pattern’和‘marker’元素 不会创建新的视口，尽管接受‘viewBox’属性。 ‘clipPath’或‘mask’ 元素也不例外。 这些元素内容中的百分比长度与图形效果区域的尺寸不成比例。

‘foreignObject’元素为其子内容建立一个新的 CSS包含块。 当其回退内容被渲染时，‘video’、‘audio’或‘canvas’元素也是如此。 这对布局子内容的范围有类似于新视口的效果。 然而，为了渲染作为‘foreignObject’后代的SVG元素， 必须有一个新的‘svg’元素 来建立SVG文档片段和SVG视口。

‘image’或‘iframe’元素创建一个新的 文档视口 用于引用的文档。 如果引用的文档是SVG文件，它当然会建立自己的SVG视口。

新的SVG视口是否也建立了新的额外裁剪路径取决于在建立新SVG视口的元素上的overflow属性的值。

8.9. 单位

SVG 遵循 CSS 值和单位模块 [css-values] 中对属性、呈现属性和 CSS 属性的常见值和单位的描述和定义。每个属性和属性必须指定使用的组件值类型。随后或扩展的由 CSS 工作组或 SVG 工作组发布的规范可以扩展基本数据类型或添加新数据类型。

对于被定义为相对于 SVG 视口大小的 <percentage> 值：

• 对于作为 SVG 视口的 SVG 视口 的百分比表示的任何 x 坐标值或宽度值，使用的值必须是该视口的 ‘viewBox’ 的宽度参数的用户单位的百分比。如果没有指定 ‘viewBox’，那么使用的值必须是 SVG 视口的宽度的用户单位的百分比。
• 对于作为 SVG 视口的 SVG 视口 的百分比表示的任何 y 坐标值或高度值，使用的值必须是该视口的 ‘viewBox’ 的高度参数的用户单位的百分比。如果没有指定 ‘viewBox’，那么使用的值必须是 SVG 视口的高度的用户单位的百分比。
• 对于作为 SVG 视口的 SVG 视口 的百分比表示的任何其他长度值，百分比必须计算为该视口的 ‘viewBox’ 的归一化对角线的百分比。如果没有指定 ‘viewBox’，那么必须使用 SVG 视口的归一化对角线长度。归一化对角线长度必须通过 sqrt((width)**2 + (height)**2)/sqrt(2) 计算。

示例单位 下面说明了不同类型单位的一些处理规则。

<?xml version="1.0" standalone="no"?>
<svg width="400px" height="200px" viewBox="0 0 4000 2000"
     xmlns="http://www.w3.org/2000/svg">
  <title>示例单位</title>
  <desc>说明各种单位选项</desc>

  <!-- 框架 -->
  <rect x="5" y="5" width="3990" height="1990"
        fill="none" stroke="blue" stroke-width="10">

  <g fill="blue" stroke="red" font-family="Verdana" font-size="150">
    <!-- 绝对单位标识符 -->
    <g transform="translate(400,0)">
      <text x="-50" y="300" fill="black" stroke="none">绝对单位：</text>
      <rect x="0" y="400" width="4in" height="2in" stroke-width=".4in">
      <rect x="0" y="750" width="384" height="192" stroke-width="38.4">
      <g transform="scale(2)">
        <rect x="0" y="600" width="4in" height="2in" stroke-width=".4in">
      </g>
    </g>

    <!-- 相对单位标识符 -->
    <g transform="translate(1600,0)">
      <text x="-50" y="300" fill="black" stroke="none">相对单位：</text>
      <rect x="0" y="400" width="2.5em" height="1.25em" stroke-width=".25em">
      <rect x="0" y="750" width="375" height="187.5" stroke-width="37.5">
      <g transform="scale(2)">
        <rect x="0" y="600" width="2.5em" height="1.25em" stroke-width=".25em">
      </g>
    </g>

    <!-- 百分比 -->
    <g transform="translate(2800,0)">
      <text x="-50" y="300" fill="black" stroke="none">百分比：</text>
      <rect x="0" y="400" width="10%" height="10%" stroke-width="1%">
      <rect x="0" y="750" width="400" height="200" stroke-width="31.62">
      <g transform="scale(2)">
        <rect x="0" y="600" width="10%" height="10%" stroke-width="1%">
      </g>
    </g>
  </g>
</svg>

示例单位

左侧的三个矩形演示了使用绝对单位标识符之一，“in”单位（英寸）。CSS 定义 1 英寸等于 96 像素。因此，最上面的矩形（以英寸为单位）与中间的矩形（以用户单位指定，使得每对应英寸有 96 用户单位）完全相同。该组底部矩形说明了当以英寸指定的值被缩放时会发生什么。

中间的三个矩形演示了使用相对单位标识符之一，“em”单位。由于外部 ‘g’ 元素的 font-size 属性被设置为 150，每个“em”单位等于 150 用户单位。顶部矩形（以“em”单位指定）与中间矩形（以用户单位指定，使得每个“em”单位有 150 用户单位）完全相同。该组底部矩形说明了当以“em”单位指定的值被缩放时会发生什么。

右侧的三个矩形演示了使用百分比。请注意，SVG 视口的用户坐标系统中的宽度和高度（在这种情况下为 最外层 svg 元素）分别为 4000 和 2000，因为处理 ‘viewBox’ 属性会导致用户坐标系统的变换。顶部矩形（以百分比单位指定）与中间矩形（以等效用户单位指定）完全相同。特别注意，中间矩形的 stroke-width 属性设置为实际宽度的 1% 的 sqrt((actual-width)**2 + (actual-height)**2) / sqrt(2)，在这种情况下是 .01*sqrt(4000*4000+2000*2000)/sqrt(2)，或 31.62。该组底部矩形说明了当以百分比单位指定的值被缩放时会发生什么。

8.10. 边界框

边界框

元素的边界框（或“bbox”）是与该元素用户坐标系统的轴对齐的最紧密的矩形，完全包含该元素及其后代。

可以为一个元素计算三种类型的边界框：

1. 对象边界框是仅包含元素几何形状的边界框。对于基本形状，这是填充的区域。除非另有说明，否则这就是“边界框”这一未限定术语的含义。
2. 描边边界框是包含元素几何形状及其描边形状的边界框。
3. 装饰边界框是包含元素几何形状、其描边形状和标记的边界框。

请注意，元素上的不透明度、可见性、填充、填充不透明度、填充规则、描边虚线数组和描边虚线偏移属性对元素的边界框没有影响。

对于曲线形状，边界框必须包含形状边缘的所有部分，而不仅仅是端点。请注意，曲线的控制点如果未被定义为位于结果曲线的线条上（例如，立方贝塞尔命令的第二个坐标对）不得对边界框的维度产生影响（尽管这些点可能落在边界框的区域内，如果它们位于形状内部，或者靠近曲线）。例如，距离曲线边缘的非包围侧的控制点必须从边界框中排除。

路径'M20,50 L35,100 H120 V50 Q70,10 20,50'以浅蓝色显示。左侧显示了路径的正确对象边界框。请注意，它不包括曲线的最上方控制点，但它包括了所有蓝色形状，甚至是那些位于控制点的凸包外的部分。

即使元素不在渲染树中——因为它被设置为'display: none'、位于‘defs’元素中、不通常渲染的‘symbol’元素，或不在文档树中——它仍然有一个边界框。对元素的getBBox调用将返回与元素被渲染时相同的矩形。然而，不在渲染树中的元素不会对任何祖先元素的边界框产生贡献。

<svg xmlns="http://www.w3.org/2000/svg">

  <title>边界框计算</title>
  <desc>根据上下文显示不同边界框结果的元素示例。</desc>

  <defs id="defs-1">
     <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
  </defs>

  <g id="group-1">
    <use id="use-1" href="#rect-1" x="10" y="10" />

    <g id="group-2" display="none">
      <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
    </g>
  </g>
</svg>

对于文本内容元素，为了边界框计算的目的，每个字形必须被视为一个单独的图形元素。计算必须假设所有字形占用完整字形单元。完整字形单元的宽度必须等于水平推进，且高度等于水平文本的EM框。对于侧排的垂直文本，完整字形单元必须具有等于EM框的宽度和等于水平推进的高度。对于其他垂直文本，完整字形单元的宽度必须等于EM框，高度必须等于垂直推进，或者如果字体中未定义垂直推进，则高度等于EM框的高度。例如，对于水平文本，计算必须假设每个字形垂直延伸到字体的完整升高和降落值。

因为声明式或脚本化的动画可以改变元素的形状、大小和位置，边界框是可变的。因此，元素的边界框应反映在请求边界框时元素的当前值，无论是通过脚本调用，还是作为声明式或链接语法的一部分。

具有零宽度、零高度或两者的元素（例如一个垂直或水平线，或具有零宽度或高度的‘rect’元素）仍然具有边界框，对于正维度，边界框的值为正维度，或者如果未指定正维度，则宽度和高度均为'0'。类似地，具有零宽度和高度的‘path’元素的子路径段必须包含在该元素的几何形状中，以便于边界框的计算。

没有指定位置的元素（例如‘path’元素，其d属性值为none）在计算边界框时位置为(0,0)。

注意，DOM对象不是SVGGraphicsElement（如渐变元素）的元素没有边界框，因此没有请求边界框的接口。

在渲染树中的元素引用未解析的资源仍然具有边界框，由其属性中指定的位置和维度定义，或者如果未提供值，则由这些属性的初始值定义。例如，元素<use href="#bad" x="10" y="10">将具有x和y为10，宽度和高度为0的边界框。

以下算法定义了如何计算给定元素的边界框。算法的输入为：

• element，我们正在计算边界框的元素；
• space，计算边界框的坐标空间；
• fill，布尔值，指示边界框是否包括元素及其后代的几何形状；
• stroke，布尔值，指示边界框是否包括元素及其后代的描边；
• markers，布尔值，指示边界框是否包括元素及其后代的标记；
• clipped，布尔值，指示边界框是否受到应用于元素及其后代的任何裁剪路径的影响。

根据element的类型，计算边界框的算法如下：

一个 形状

一个 文本内容元素

一个 ‘a’ 元素在 文本内容元素 内

1. 让 box 初始化为 (0, 0, 0, 0) 的矩形。
2. 让 fill-shape 为 element 的 等效路径 如果它是一个 形状，否则为包含每个对应于文本的字形单元的形状。
3. 如果 fill 为 true，则将 box 设置为在坐标系统 space 中包含 fill-shape 的最紧凑的矩形。

   属性 fill、fill-opacity 和 fill-rule 的值不影响 fill-shape。

4. 如果 stroke 为 true 且元素的 stroke 不是 none，则将 box 设置为 box 和坐标系统 space 中包含元素的 stroke 形状 的最紧凑矩形的并集，假设元素没有虚线模式。

   属性 stroke-opacity、stroke-dasharray 和 stroke-dashoffset 的值不影响对 stroke 形状的计算。

5. 如果 markers 为 true，则对于元素上渲染的每个标记 marker：
   1. 对于 parent 的每个后代 图形元素 child：
      1. 如果 child 在 ‘marker’ 内部有祖先元素，其样式为 'display: none'，有一个失败的 条件处理属性，或者不是一个 ‘a’、 ‘g’、‘svg’ 或 ‘switch’ 元素， 则继续下一个后代 图形元素。
      2. 否则，将 box 设置为 box 和调用算法以 child 为元素、space 为目标坐标空间、fill、stroke 和 markers 都为 true，clipped 为 clipped 的结果的并集。
6. 如果 clipped 为 true 且 element 上的 clip-path 的值不是 none，则将 box 设置为在坐标系统 space 中包含 box 和裁剪路径的交集的最紧凑矩形。
7. 返回 box。

一个 容器元素

‘use’

1. 让 box 初始化为 (0, 0, 0, 0) 的矩形。
2. 让 parent 为 容器元素，如果它是一个，否则为 ‘use’ 元素的影子树的根。
3. 对于 parent 的每个后代 图形元素 child：
   1. 如果 child 未渲染，则继续下一个后代 图形元素。
   2. 否则，将 box 设置为 box 和调用算法以 child 为元素、相同的 space、fill、stroke、markers 和 clipped 的结果的并集。
4. 如果 clipped 为 true：
   • 如果 element 上的 clip-path 的值不是 none， 则将 box 设置为在坐标系统 space 中包含 box 和裁剪路径的交集的最紧凑矩形。
   • 如果 element 的 overflow 属性适用并且不为 visible， 则将 box 设置为在坐标系统 space 中包含 box 和元素的溢出边界的交集的最紧凑矩形。
   • 如果 element 的 clip 属性适用并且不为 auto， 则将 box 设置为在坐标系统 space 中包含 box 和由 clip 指定的矩形的交集的最紧凑矩形。
5. 返回 box。

‘canvas’

‘foreignObject’

‘iframe’

‘image’

‘video’

1. 让 box 为在坐标空间 space 中包含由元素的 ‘x’、‘y’、‘width’ 和 ‘height’ 几何属性定义的 定位矩形 的最紧凑矩形。

   此算法的输入参数 fill、stroke 和 markers 不会影响返回的边界框。

2. 如果 clipped 为 true 且 element 上的 clip-path 的值不是 none，则将 box 设置为在坐标系统 space 中包含 box 和裁剪路径的交集的最紧凑矩形。
3. 返回 box。

与值为 (0, 0, 0, 0) 和空形状的 box 的并集是 box。

对象边界框、描边边界框 或 装饰边界框 是通过调用上述边界框计算算法得到的，参数如下： element 为元素本身；space 为元素的用户坐标系统；fill 为 true； stroke 为 true 如果我们正在计算 描边边界框 或 装饰边界框，否则为 false；markers 为 true 如果我们正在计算 装饰边界框，否则为 false；clipped 为 false。

8.11. 对象边界框单位

以下元素提供将坐标值和长度表示为 对象边界框 的分数（在某些情况下为百分比）的选项，通过在给定元素上设置指定属性为 'objectBoundingBox'：

在接下来的讨论中，术语 适用元素 是指应用特定效果的元素。对于梯度和图案，适用元素是具有其 填充 或 描边 属性引用给定梯度或图案的 图形元素。（有关 文本元素 的特殊规则，请参见 对象边界框单位和文本元素 的讨论。）对于裁剪路径、遮罩和滤镜，适用元素可以是 容器元素 或 图形元素。

当使用关键字 objectBoundingBox 时，效果就像在嵌套变换矩阵列表中插入一个补充变换矩阵，以创建一个新的用户坐标系统。

首先，通过确定适用元素的 对象边界框 的范围来获得（minx,miny）和（maxx,maxy）坐标。

然后，在新的用户坐标系统中，坐标（0,0）映射到适用元素的用户坐标系统中紧密边界框的（minx,miny）角落，坐标（1,1）映射到适用元素的紧密边界框的（maxx,maxy）角落。在大多数情况下，以下变换矩阵产生正确的效果：

[ (maxx-minx) 0 0 (maxy-miny) minx miny ]

当使用百分比与定义梯度向量、图案瓷砖、滤镜区域或遮罩区域的属性时，百分比表示与相应的十进制值相同的值（例如，50% 表示与 0.5 相同）。如果在 ‘pattern’、‘clipPath’、‘mask’ 或 ‘filter’ 元素中使用百分比，这些 值根据 单位 中定义的百分比处理规则进行处理。

可以为以对象边界框单位的分数或百分比表示的值指定任何数值。特别是，可以指定小于零或大于一的分数，以及小于 0% 或大于 100% 的百分比。

当适用元素的几何形状没有宽度或高度时，例如水平或垂直线，即使线由于具有非零的描边宽度而在观察时具有实际厚度，也不应使用关键字 objectBoundingBox，因为描边宽度在边界框计算中被忽略。当适用元素的几何形状没有宽度或高度且指定了 objectBoundingBox 时，给定效果（例如，梯度或滤镜）将被忽略。

8.12. SVG 内容的固有尺寸属性

为了在使用 CSS 格式化的主机文档中包含 SVG，必须计算 具体对象大小。 具体对象大小 必须使用 默认大小算法 计算，该算法在 CSS Images 3 中定义 [css-images-3], 输入如下：

指定大小 必须根据 宽度 和 高度 属性的使用值确定，属于 ‘svg’ 元素。

固有尺寸 也必须根据 宽度 和 高度 属性确定。如果未指定 宽度 或 高度，则使用值为初始值 'auto'。 'auto' 和百分比长度不得用于确定 固有宽度 或 固有高度。

对于位图图像格式，固有尺寸 是固定在 图像文件中的，指定大小根据需要在主机文档中定义以缩放图像。 SVG 由于具有可伸缩性，会调整 固有宽度 和 固有高度 为 指定大小。 因此，当指定为长度时，宽度 和 高度 属性控制 SVG 图像的 固有尺寸 和 指定大小，该大小用于在主机文档中放置 SVG 图像。

固有宽高比 必须使用以下 算法计算。如果算法返回 null，则没有固有宽高比。

1. 如果 宽度 和 高度 属性在 ‘svg’ 元素上均为绝对值：
   1. 返回 width / height
2. 如果活动 SVG 视图：
   1. 设 viewbox 为活动 SVG 视图定义的视口
   2. 返回 viewbox.width / viewbox.height
3. 如果 ‘viewBox’ 在 ‘svg’ 元素上正确指定：
   1. 设 viewbox 为 ‘viewBox’ 属性在 ‘svg’ 元素上的视口
   2. 返回 viewbox.width / viewbox.height
4. 返回 null

本节中定义的行为特定于 CSS，但可以适应其他主机上下文。在所有主机上下文中，固有宽高比， 在可用时，必须在调整 SVG 视口大小时予以尊重。

8.14. DOM 接口

8.14.1. 接口 SVGTransform

SVGTransform 接口用于表示出现在 <transform-function> 属性值，这些值在transform 属性及其展示属性 ‘transform’、‘gradientTransform’ 和 ‘patternTransform’ 中出现。SVGTransform 表示变换列表中的单个组件，如单个 scale(…) 或 matrix(…) 值。

SVGTransform 对象可以被指定为 只读，这意味着尝试修改该对象将导致抛出异常，如下所述。

SVGTransform 对象可以与特定元素 关联。关联的元素用于确定如果该对象反映该属性，将更新哪个元素的 ‘transform’ 展示属性。除非另有说明，SVGTransform 对象默认不与任何元素关联。

SVGTransform 对象维护一个内部 <transform-function> 值，称为其 值。它还维护一个 DOMMatrix 对象，称为其 矩阵对象，这是从 matrix IDL 属性返回的对象。SVGTransform 对象的 矩阵对象 始终与其 值 保持同步。

[Exposed=Window]
interface SVGTransform {

  // 变换类型
  const unsigned short SVG_TRANSFORM_UNKNOWN = 0;
  const unsigned short SVG_TRANSFORM_MATRIX = 1;
  const unsigned short SVG_TRANSFORM_TRANSLATE = 2;
  const unsigned short SVG_TRANSFORM_SCALE = 3;
  const unsigned short SVG_TRANSFORM_ROTATE = 4;
  const unsigned short SVG_TRANSFORM_SKEWX = 5;
  const unsigned short SVG_TRANSFORM_SKEWY = 6;

  readonly attribute unsigned short type;
  [SameObject] readonly attribute DOMMatrix matrix;
  readonly attribute float angle;

  void setMatrix(DOMMatrixReadOnly matrix);
  void setTranslate(float tx, float ty);
  void setScale(float sx, float sy);
  void setRotate(float angle, float cx, float cy);
  void setSkewX(float angle);
  void setSkewY(float angle);
};

在SVGTransform上定义的数字变换类型常量用于表示SVGTransform的值的类型。它们的含义如下：

使用数字变换类型常量是一种反模式，不会引入任何新常量值来支持SVGTransform所支持的变换类型。如果支持并使用其他类型的变换，则SVGTransform将使用SVG_TRANSFORM_UNKNOWN类型。有关这些类型的变换的其他属性如何操作的详细信息，请参见下文。

type IDL属性表示SVGTransform的值的变换项类型。在获取type时，将执行以下步骤：

1. 如果SVGTransform的值是matrix(…)、translate(…)、scale(…)、rotate(…)、skewX(…)或skewY(…)函数，则返回上述变换类型表中的相应常量值。
2. 否则，返回SVG_TRANSFORM_UNKNOWN。

   例如，对于scaleX(…)或translate3d(…)变换，将返回SVG_TRANSFORM_UNKNOWN。

matrix IDL属性表示变换为4x4齐次矩阵，在获取时返回SVGTransform的矩阵对象。当首次创建矩阵对象时，其值设置为与SVGTransform的变换函数值匹配，并设置为反映SVGTransform。

请参阅CSS变换规范，以获取不同变换函数类型与特定矩阵值对应的描述。

angle IDL属性表示rotate(…)、skewX(…)或skewY(…)变换函数的角度参数。在获取时，将执行以下步骤：

1. 如果SVGTransform对象的值是rotate(…)、skewX(…)或skewY(…)函数，则返回其角度参数（以度为单位）。
2. 否则，返回0。

setMatrix方法用于将SVGTransform设置为给定的矩阵值。当调用setMatrix(matrix)时，将执行以下步骤：

1. 如果SVGTransform对象是只读，则抛出一个不允许修改错误。
2. 如果matrix的is2d方法返回true，则将SVGTransform对象的值设置为表示与matrix相同矩阵的matrix(…)值。
3. 否则，将SVGTransform对象的值设置为表示与matrix相同矩阵的matrix3d(…)值。
4. 将矩阵组件值从matrix复制到SVGTransform对象的矩阵对象。
5. 如果SVGTransform对象反映呈现属性值的元素，则重新序列化反映的属性。

这些 setTranslate，setScale，setRotate，setSkewX 和 setSkewY 方法用于将 SVGTransform 设置为一个新的变换函数值。当调用这些方法之一时，将执行以下步骤：

1. 如果 SVGTransform 对象是 只读，则 抛出 NoModificationAllowedError。
2. 将 SVGTransform 对象的 值 设置为一个新的变换函数值，具体取决于调用了哪个方法：

   setTranslate(tx, ty)

   新的变换函数值是 translate(tx, ty)

   setScale(sx, sy)

   新的变换函数值是 scale(sx, sy)

   setRotate(angle, cx, cy)

   新的变换函数值是 rotate(angle, cx, cy)

   setSkewX(angle)

   新的变换函数值是 skewX(angle)

   setSkewY(angle)

   新的变换函数值是 skewY(angle)

3. 将 SVGTransform 对象的 矩阵对象 的组件设置为与新的变换函数 值 匹配。
4. 如果 SVGTransform 对象 反映了演示属性值的一个元素，则 重新序列化 反射的属性。

本规范对 DOMMatrix 对象的行为施加了额外的要求，这些要求超出了 几何接口 规范中所描述的内容，以便它们可以用于反映采用变换值的演示属性。

每个 DOMMatrix 对象在两种模式之一下运行。它可以：

1. 反映一个 SVGTransform（通过 matrix IDL 属性暴露在 SVGTransform 上），或者
2. 被分离，这是使用其构造函数或 createSVGMatrix 创建的 DOMMatrix 对象的情况。

一个 DOMMatrix 可以被指定为 只读，这意味着尝试修改该对象将导致抛出异常。当分配给任何只读 DOMMatrix 的 IDL 属性时，或者当调用其任何可变变换方法时，将抛出 NoModificationAllowedError 异常，而不是更新内部值。

请注意，这仅适用于可读写的 DOMMatrix 接口； DOMMatrixReadOnly 接口在未反映 transform 时，如果尝试修改它，将已经抛出异常。

在分配给任何可写的 DOMMatrix 的 IDL 属性时，或者在调用其任何可变变换方法时，在更新内部矩阵值后执行以下步骤：

1. 如果 DOMMatrix 反映一个 SVGTransform，则：
   1. 如果 DOMMatrix 将从其 is2d 方法返回 true，则将 SVGTransform 对象的 值 设置为表示与 DOMMatrix 相同矩阵的 matrix(…) 值。
   2. 否则，将 SVGTransform 对象的 值 设置为表示与 DOMMatrix 相同矩阵的 matrix3d(…) 值。
   3. 如果 SVGTransform 对象 反映了演示属性值的一个元素，则 重新序列化 反射的属性。

8.14.2. 接口 SVGTransformList

SVGTransformList 接口是一个 列表接口，其元素为 SVGTransform 对象。 SVGTransformList 代表一个值，transform 属性可以取这个值，即 要么是一个 <transform-list> 或者关键字 none。

[Exposed=Window]
interface SVGTransformList {

  readonly attribute unsigned long length;
  readonly attribute unsigned long numberOfItems;

  void clear();
  SVGTransform initialize(SVGTransform newItem);
  getter SVGTransform getItem(unsigned long index);
  SVGTransform insertItemBefore(SVGTransform newItem, unsigned long index);
  SVGTransform replaceItem(SVGTransform newItem, unsigned long index);
  SVGTransform removeItem(unsigned long index);
  SVGTransform appendItem(SVGTransform newItem);
  setter void (unsigned long index, SVGTransform newItem);

  // 其他列表接口不常见的附加方法。
  SVGTransform createSVGTransformFromMatrix(DOMMatrixReadOnly matrix);
  SVGTransform? consolidate();
};

createSVGTransformFromMatrix 方法用于从矩阵对象创建一个新的 SVGTransform 对象。当调用 createSVGTransformFromMatrix(matrix) 方法时，执行以下步骤：

1. 让 transform 成为一个新创建的 SVGTransform 对象，且该对象是 分离的。
2. 按照调用 setMatrix 方法时的步骤执行，传递 matrix 作为参数。
3. 返回 transform。

consolidate 方法用于将变换列表转换为等效的单个变换函数。当调用 consolidate() 方法时，执行以下步骤：

1. 如果 SVGTransformList 对象是 只读的，则 抛出 NoModificationAllowedError。
2. 如果列表为空，返回 null。
3. 解除附加并移除列表中的所有元素。
4. 让 transform 成为一个新创建的 SVGTransform 对象。
5. 让 matrix 为通过从单位矩阵开始，然后按顺序后乘列表中每个 SVGTransform 的 矩阵对象 的值所获得的矩阵值。
6. 将 transform 的 矩阵对象 的组件设置为 matrix 中的组件值。
7. 如果 transform 的 矩阵对象 的 is2d 方法返回 true，则将 transform 的 值 设置为一个表示与 矩阵对象 相同矩阵的 matrix(…) 值。
8. 否则，将 transform 的 值 设置为一个表示与 矩阵对象 相同矩阵的 matrix3d(…) 值。
9. 附加 transform 到此 SVGTransformList。
10. 将 transform 附加到此列表。
11. 如果列表 反映 一个展示属性，则 重新序列化 该反映属性。
12. 返回 transform。

所有其他接口成员的行为 SVGLengthList 在 列表接口 中定义。

8.14.3. 接口 SVGAnimatedTransformList

一个 SVGAnimatedTransformList 对象用于 反映 transform 属性及其对应的呈现属性 （这取决于元素，可能是 ‘transform’， ‘gradientTransform’ 或 ‘patternTransform’）。

[Exposed=Window]
interface SVGAnimatedTransformList {
  [SameObject] readonly attribute SVGTransformList baseVal;
  [SameObject] readonly attribute SVGTransformList animVal;
};

属性 baseVal 和 animVal 的 IDL 属性 代表反映的呈现属性的值。 获取 baseVal 或 animVal 时，将返回一个 SVGTransformList 对象，反映给定的 呈现属性。

8.14.4. 接口 SVGPreserveAspectRatio

SVGPreserveAspectRatio 接口用于表示 ‘preserveAspectRatio’ 属性的值。

一个 SVGPreserveAspectRatio 对象可以被指定为 只读， 这意味着尝试修改该对象将导致抛出异常，如下所述。

每个 SVGPreserveAspectRatio 对象 反映基值 的 反射 ‘preserveAspectRatio’ 属性（通过 baseVal 或 animVal 成员的方法暴露）。

[Exposed=Window]
interface SVGPreserveAspectRatio {

  /// 对齐类型
  const unsigned short SVG_PRESERVEASPECTRATIO_UNKNOWN = 0;
  const unsigned short SVG_PRESERVEASPECTRATIO_NONE = 1;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMIN = 2;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMIN = 3;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMIN = 4;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMID = 5;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMID = 6;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMID = 7;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMINYMAX = 8;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMIDYMAX = 9;
  const unsigned short SVG_PRESERVEASPECTRATIO_XMAXYMAX = 10;

  // 相遇或切割类型
  const unsigned short SVG_MEETORSLICE_UNKNOWN = 0;
  const unsigned short SVG_MEETORSLICE_MEET = 1;
  const unsigned short SVG_MEETORSLICE_SLICE = 2;

  attribute unsigned short align;
  attribute unsigned short meetOrSlice;
};

在SVGPreserveAspectRatio上定义的数值对齐类型常量用于表示‘preserveAspectRatio’属性可以取的对齐关键字值。它们的含义如下：

同样，在SVGPreserveAspectRatio上定义的数值相遇或切割类型常量用于表示‘preserveAspectRatio’属性可以取的相遇或切割关键字值。它们的含义如下：

align IDL属性表示‘preserveAspectRatio’值的对齐关键字部分。获取时，将执行以下步骤：

设置 align 时，将执行以下步骤：

1. 如果 SVGPreserveAspectRatio 为 只读，则 抛出 NoModificationAllowedError。
2. 如果 value 为 SVG_PRESERVEASPECTRATIO_UNKNOWN 或在上面的对齐关键字表中没有对应项，则返回。
3. 让 string 为上面对齐关键字表中对应 value 的关键字。
4. 在 string 后附加一个 U+0020 空格字符。
5. 让 meet or slice 为从该 SVGPreserveAspectRatio 的 meetOrSlice 成员返回的值。
6. 在 string 后附加上面 meet-or-slice 关键字表中对应 meet or slice 的关键字。
7. 将反映的 ‘preserveAspectRatio’ 属性设置为 string。

meetOrSlice IDL 属性表示 ‘preserveAspectRatio’ 值的对齐关键字部分。获取时执行以下步骤：

设置 meetOrSlice 时，将执行以下步骤：

1. 如果 SVGPreserveAspectRatio 为 只读，则 抛出 NoModificationAllowedError。
2. 如果 value 为 SVG_MEETORSLICE_UNKNOWN 或在上面的 meet-or-slice 关键字表中没有对应项，则返回。
3. 让 align 为从该 SVGPreserveAspectRatio 的 align 成员返回的值。
4. 让 string 为上面对齐关键字表中对应 align 的关键字。
5. 在 string 后附加一个 U+0020 空格字符。
6. 在 string 后附加上面 meet-or-slice 关键字表中对应 value 的关键字。
7. 将反映的 ‘preserveAspectRatio’ 属性设置为 string。

8.14.5. 接口 SVGAnimatedPreserveAspectRatio

SVGAnimatedPreserveAspectRatio 对象用于 反映 ‘preserveAspectRatio’ 属性。

[Exposed=Window]
interface SVGAnimatedPreserveAspectRatio {
  [SameObject] readonly attribute SVGPreserveAspectRatio baseVal;
  [SameObject] readonly attribute SVGPreserveAspectRatio animVal;
};

属性 baseVal 和 animVal IDL 属性表示反映的 ‘preserveAspectRatio’ 属性的当前非动画值。获取 baseVal 或 animVal 时，返回一个 SVGPreserveAspectRatio 对象，该对象反映该属性的基础值。