第3章：渲染模型

3.2. 渲染树

SVG文档最终渲染表示的组件与文档模型中的基本元素之间并没有一对一的关系。 图形的外观反映了一种平行结构——渲染树， 其中某些元素被排除，另一些元素被重复。

SVG命名空间中的许多元素并不直接代表图形文档的一个组件。 相反，它们定义图形效果、元数据、 用于表示其他元素的内容， 或在特定条件下显示的替代内容。 在动态文档中，图形的某些组件 可能会根据交互或动画进行渲染或不渲染。 这些未渲染的元素不会直接包含在渲染树中。

由于SVG支持图形子组件的重用， 某些元素会被多次渲染。 每个单独的渲染可能具有上下文相关的样式， 并可能以不同的比例或变换进行光栅化。

3.2.1. 定义

渲染树

渲染树是一个在SVG文档片段中被渲染的元素集合。 它是从文档树生成的， 通过排除未渲染元素 并插入用于重用图形的额外片段。 图形按照渲染树的顺序进行绘制和合成， 受绘制顺序属性的重新排序影响。 注意，尽管没有视觉效果的元素仍可能存在于渲染树中。

已渲染元素

在当前文档的渲染树中具有直接表示的元素。 包括在元素的使用元素阴影树中的已渲染实例。 不包括影响渲染的元素， 作为重用图形的源定义， 但自身并不直接被渲染。 参见已渲染与未渲染元素。

未渲染元素

在当前文档的渲染树中没有直接表示的元素。 它仍可能通过重用图形或图形效果影响渲染树。 参见已渲染与未渲染元素。

重用图形

包含在渲染树中的图形组件， 但在文档模型中没有单一直接等价元素。 它们可能通过阴影DOM元素表示 （如重用的图形使用‘use’元素）， 或作为图形效果生成的图像片段 （如模式或遮罩）。

从不渲染元素

任何类型的元素是从不直接渲染的， 无论上下文或显示样式值。 它包括以下元素： ‘clipPath’， ‘defs’， ‘desc’， ‘linearGradient’， ‘marker’， ‘mask’， ‘metadata’， ‘pattern’， ‘radialGradient’， ‘script’， ‘style’ 和 ‘title’； 它还包括一个‘symbol’元素，该元素不是 实例根的使用元素阴影树。

可渲染元素

任何类型的元素可以在渲染树中具有直接表示， 作为图形、容器、文本、音频或动画。 它包括以下元素： ‘a’， ‘audio’， ‘canvas’， ‘circle’， ‘ellipse’， ‘foreignObject’， ‘g’， ‘iframe’， ‘image’， ‘line’， ‘path’， ‘polygon’， ‘polyline’， ‘rect’， ‘svg’， ‘switch’， ‘text’， ‘textPath’， ‘tspan’， ‘unknown’， ‘use’ 和 ‘video’； 它还包括一个‘symbol’元素，该元素是 实例根的使用元素阴影树。

可渲染元素在特定文档或时间点可能会被渲染，也可能不会被渲染。

3.2.2. 渲染与非渲染元素

在任何给定时间，每个 SVG 元素 （或元素实例在使用元素阴影树中） 要么是渲染的，要么是非渲染的。 元素当前是否被渲染不仅影响其视觉显示，还影响 交互性和几何计算。

元素在以下四种情况下未被渲染：

• 从未渲染元素类型
• 因条件处理属性 或‘switch’ 结构而被排除的元素
• 对于display属性 的计算样式值为none的元素
• 其他非渲染元素的后代元素

非渲染元素：

• 对图形没有视觉影响， 除非它们在渲染另一个引用它们的元素时被使用。
• 不对剪切路径或遮罩 的净几何贡献 当它们是 ‘clipPath’ 或‘mask’ 的后代时
• 对指针事件不敏感
• 不能接收焦点
• 不对边界框计算做出贡献
• 在执行文本布局时不被考虑

非渲染元素在文档可访问性树中不被表示。 尽管如此，它们仍然是文档模型的一部分， 并参与样式继承和级联。

3.2.3. 控制可见性：‘display’和‘visibility’属性的影响

SVG 使用两个属性来切换通常渲染元素的可见显示： display 和 visibility。 尽管它们在静态文档中具有相似的可见效果， 但在概念上是不同的。

有关display和visibility的定义，请参见 CSS 2.1 规范。 [CSS2]

将display设置为none 会导致元素未被渲染。 当应用于 图形元素、 文本内容元素和容器元素时，设置display为none 会导致该元素（及其所有后代）不成为渲染树的一部分。 请注意，display不是一个继承属性。

具有任何其他display值的元素 除none外，都会正常渲染。

display属性仅适用于可渲染元素。 在一个从未直接渲染 或基于条件处理而未渲染的元素上设置display: none没有效果。

display属性影响给定元素的直接处理， 但不阻止它被其他元素引用。 例如，在‘path’元素上设置 display: none会阻止该元素直接渲染到画布上， 但‘path’ 元素仍然可以被‘textPath’元素引用， 并且其几何形状将在路径文本处理时被使用。

当应用于图形元素或‘use’元素时， 将visibility设置为hidden 或collapse 会导致该元素未被绘制。 但它仍然是渲染树的一部分。 它可能对指针事件敏感 （取决于pointer-events的值）， 可能会接收焦点（取决于‘tabindex’的值）， 参与边界框计算和剪切路径， 并影响文本布局。

visibility属性仅直接影响 图形元素、文本内容元素和当它是文本内容元素的子元素时的 ‘a’元素。 由于visibility是一个继承属性， 因此， 虽然它对‘use’元素或容器元素本身没有影响， 其继承值可以影响后代元素。

3.2.4. 重用图形

在文档的一个部分（或在另一个文档）定义的图形内容 可以用于渲染其他元素。 从渲染的角度来看，有两种类型的重用图形：

• 阴影 DOM 元素， 例如由‘use’元素生成的元素 或通过画布服务器之间的交叉引用生成的元素；
• 作为图形效果的一部分重用的内容， 包括标记的子内容、画布服务器 元素、 ‘clipPath’， 和‘mask’。

阴影 DOM 元素的渲染方式与普通元素相同， 就像宿主元素（例如‘use’元素） 是一个容器，阴影内容是其后代一样。 阴影 DOM 元素上的样式和几何属性 与其在源文档中的对应元素 独立解析。 display属性对 阴影元素具有正常效果， 除了适用于‘symbol’元素的特殊规则。

出于混合目的，‘use’元素形成了一个非孤立组。

相比之下， 图形效果元素生成一个自包含的 SVG 片段， 独立渲染为堆叠上下文 和一个孤立组。 该片段的画布是缩放的。 图形效果元素的子内容 在该画布中渲染和合成。 整个平面画布在与其他绘画层混合时 被视为矢量图像。

图形效果元素任何子内容上的display属性 在设置为none时具有正常效果， 排除该子树用于渲染。 然而，图形效果并不会因图形效果元素或祖先上的display: none值而改变。

3.3. 绘图模型

SVG 使用“绘图模型”进行渲染。绘制 通过连续的操作应用于输出设备，使得每个操作都在输出设备的某个区域上绘制， 可能会遮盖之前已经涂抹的部分。 每绘制一个对象或组后，它就成为下一个绘制操作的背景的一部分。 SVG 2 支持先进的混合模式和合成操作，以控制每个绘制操作如何与背景交互。 这些绘制操作的规则在 合成与混合规范中概述。

3.4. 渲染顺序

SVG 中的元素在三维空间中定位。除了它们在SVG 视口的 x 和 y 轴上的位置外，SVG 元素还 在 z 轴上定位。z 轴的位置定义了它们的绘制顺序。

沿 z 轴，元素被分组为堆叠上下文。

单个图形元素被视为一个非孤立组， 构成图形元素的组件（填充、描边等）（参见绘制形状和文本）是 该组的成员。参见组如何渲染。

像‘g’元素（参见容器元素 ）创建一个合成组。 类似地，‘use’ 元素为其阴影内容创建一个合成组。 合成与混合 规范规范性地描述了如何渲染合成组。 在 SVG 中，可以对一个组应用效果。例如，透明度、滤镜或蒙版。这些效果在对组应用任何变换之前 立即应用于组的渲染结果，然后在组与组背景混合和合成之前应用。 对组应用任何此类效果会使该组隔离。

因此，渲染合成组遵循以下步骤：
如果该组是隔离的：

1. 将初始背景 设置为使用rgba(0,0,0,0)初始化的新缓冲区
2. 该组中是图形元素或 ‘g’元素的内容被 按顺序渲染到初始背景
3. 应用修改组画布的滤镜和其他效果

   为了提供高质量的渲染，滤镜 原语和其他位图效果必须在操作 坐标空间中应用。

4. 应用组变换
5. 将组画布与组背景混合和合成

else (该组不是隔离的):

1. 将初始背景 设置为组背景
2. 该组中是图形元素或 ‘g’元素的内容被 按顺序渲染到初始背景。 组变换在每个元素渲染时应用。

<svg xmlns="http://www.w3.org/2000/svg"
     width="600" height="175" viewBox="0 0 1200 350">

  <!-- 背景蓝色矩形 -->
  <rect x="100" y="100" width="1000" height="150" fill="blue">

  <!-- 从不透明到几乎透明的红色圆圈 -->
  <circle cx="200" cy="100" r="50" fill="red" opacity="1">
  <circle cx="400" cy="100" r="50" fill="red" opacity=".8">
  <circle cx="600" cy="100" r="50" fill="red" opacity=".6">
  <circle cx="800" cy="100" r="50" fill="red" opacity=".4">
  <circle cx="1000" cy="100" r="50" fill="red" opacity=".2">

  <!-- 不透明组，不透明圆圈 -->
  <g opacity="1">
    <circle cx="182.5" cy="250" r="50" fill="red" opacity="1">
    <circle cx="217.5" cy="250" r="50" fill="green" opacity="1">
  </g>
  <!-- 组透明度：.5，不透明圆圈 -->
  <g opacity=".5">
    <circle cx="382.5" cy="250" r="50" fill="red" opacity="1">
    <circle cx="417.5" cy="250" r="50" fill="green" opacity="1">
  </g>
  <!-- 不透明组，半透明绿色在红色上 -->
  <g opacity="1">
    <circle cx="582.5" cy="250" r="50" fill="red" opacity=".5">
    <circle cx="617.5" cy="250" r="50" fill="green" opacity=".5">
  </g>
  <!-- 不透明组，半透明红色在绿色上 -->
  <g opacity="1">
    <circle cx="817.5" cy="250" r="50" fill="green" opacity=".5">
    <circle cx="782.5" cy="250" r="50" fill="red" opacity=".5">
  </g>
  <!-- 组透明度.5，半透明绿色在红色上 -->
  <g opacity=".5">
    <circle cx="982.5" cy="250" r="50" fill="red" opacity=".5">
    <circle cx="1017.5" cy="250" r="50" fill="green" opacity=".5">
  </g>
</svg>

3.9. 裁剪和遮罩

SVG支持以下裁剪/遮罩功能：

• 裁剪路径，使用任意组合的‘路径’、‘文本’和 基本形状，或基本形状作为（在缺少抗锯齿的情况下）1位遮罩的轮廓，其中轮廓“内部”的所有内容都允许显示，而“外部”的所有内容则被遮罩
• 遮罩，作为容器元素 可以包含图形元素 或其他容器元素，定义一组用于作为半透明遮罩的图形，以便将前景对象合成到当前背景中。

裁剪和遮罩均在模块CSS遮罩中指定 [css-masking-1].

SVG中overflow属性行为的总结。

元素	初始值	用户代理样式表	自动	可见	隐藏	滚动
文档根svg	可见	不适用	可见 | 滚动	可见	隐藏	滚动
其他svg	可见	隐藏	可见 | 滚动	可见	隐藏	滚动
文本	可见	隐藏	可见	可见	隐藏	隐藏
图案	可见	隐藏	可见	可见	隐藏	隐藏
标记	可见	隐藏	可见	可见	隐藏	隐藏
符号	可见	隐藏	可见	可见	隐藏	隐藏
图像	可见	隐藏	可见	可见	隐藏	隐藏
iframe	可见	隐藏	可见 | 滚动	可见	隐藏	滚动
foreignObject	可见	隐藏	可见 | 滚动	可见	隐藏	滚动

overflow属性具有相同的参数值，并且具有与CSS 2.1中定义的相同含义 ([CSS2]，第11.1.1节)；然而，以下附加要点适用：

• 如果overflow属性的值为'visible'，则该属性没有效果（即，不会创建裁剪矩形）。
• 对于overflow属性可以应用的那些元素，如果overflow属性的值为hidden或scroll，则应用裁剪，其确切大小为SVG视口的大小。
• 当在‘svg’元素上指定scroll时，如果用户代理使用可见的滚动机制（如滚动条或平移器），则该机制应在SVG视口中显示，无论其内容是否被裁剪。
• 在SVG内容中，值auto意味着所有子元素的渲染内容必须是visible，要么通过滚动机制，要么通过不裁剪来渲染。 对于值为scroll的元素，用户代理使用的滚动机制，则值auto可能被视为scroll。如果用户代理没有滚动机制，则内容不会被裁剪，或者值'scroll'被视为hidden，则值auto必须被视为visible。