files/zh-cn/web/svg/attribute/preserveaspectratio/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

---
title: preserveAspectRatio
slug: Web/SVG/Attribute/preserveAspectRatio
tags:
  - SVG
  - SVG属性
  - 需要实例
translation_of: Web/SVG/Attribute/preserveAspectRatio
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>

<p>有时候, 通常我们使用  {{ SVGAttr("viewBox") }} 属性时, 希望图形拉伸占据整个视口。  在其他情况下，为了保持图形的长宽比，必须使用统一的缩放比例.<br>
 <br>
 <code>preserveAspectRatio</code>属性表示是否强制进行统一缩放.<br>
 <br>
 对于支持该属性的所有元素(如上所示)，除了 {{ SVGElement("image") }} 元素之外，preserveAspectRatio只适用于在同一元素上为 {{ SVGAttr("viewBox") }} 提供的值。对于这些元素，如果没有提供属性 {{ SVGAttr("viewBox") }} ，则忽略了preserveAspectRatio。<br>
 <br>
 对于 {{ SVGElement("image") }} 元素, preserveAspectRatio 指示引用的图像应该如何与参考矩形进行匹配，以及是否应该相对于当前用户坐标系保留参考图像的长宽比</p>

<h2 id="上下文用法">上下文用法</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="row">Categories</th>
   <td>None</td>
  </tr>
  <tr>
   <th scope="row">Value</th>
   <td>&lt;align&gt; [&lt;meetOrSlice&gt;]</td>
  </tr>
  <tr>
   <th scope="row">Animatable</th>
   <td>Yes</td>
  </tr>
  <tr>
   <th scope="row">Normative document</th>
   <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute" title="http://www.w3.org/TR/SVG11/coords.html#PreserveAspectRatioAttribute">SVG 1.1 (2nd Edition)</a></td>
  </tr>
 </tbody>
</table>

<dl>
 <dt>&lt;align&gt;</dt>
 <dd><code>&lt;align&gt;</code> 属性值表示是否强制统一缩放，当SVG的viewbox属性与视图属性宽高比不一致时使用.  <code>&lt;align&gt;</code> 属性的值一定是下列的值之一:
 <ul>
  <li><strong>none</strong><br>
   不会进行强制统一缩放，如果需要，会缩放指定元素的图形内容，使元素的边界完全匹配视图矩形。<br>
   (注意：如果 <code>&lt;align&gt;</code> 的值是 <code>none</code> ，则 <code>&lt;meetOrSlice&gt;</code> 属性的值将会被忽略。)</li>
  <li><strong>xMinYMin</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li>
  <li><strong>xMidYMin</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li>
  <li><strong>xMaxYMin</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值与视图的Y的最小值对齐。</li>
  <li><strong>xMinYMid</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br>
   将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li>
  <li><strong>xMidYMid</strong> (默认值) - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br>
   将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li>
  <li><strong>xMaxYMid</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br>
   将SVG元素的viewbox属性的Y的中点值与视图的Y的中点值对齐。</li>
  <li><strong>xMinYMax</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值与视图的X的最小值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li>
  <li><strong>xMidYMax</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的中点值与视图的X的中点值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li>
  <li><strong>xMaxYMax</strong> - 强制统一缩放。<br>
   将SVG元素的viewbox属性的X的最小值+元素的宽度与视图的X的最大值对齐。<br>
   将SVG元素的viewbox属性的Y的最小值+元素的高度与视图的Y的最大值对齐。</li>
 </ul>
 </dd>
 <dt>&lt;meetOrSlice&gt;</dt>
 <dd><code>&lt;meetOrSlice&gt;</code> 是可选的，如果提供的话， 与 <code>&lt;align&gt;</code> 间隔一个或多个的空格 ，参数所选值必须是以下值之一:
 <ul>
  <li><strong>meet</strong> (默认值) - 图形将缩放到:
   <ul>
    <li>宽高比将会被保留</li>
    <li>整个SVG的viewbox在视图范围内是可见的</li>
    <li>尽可能的放大SVG的viewbox，同时仍然满足其他的条件。</li>
   </ul>
   在这种情况下，如果图形的宽高比和视图窗口不匹配，则某些视图将会超出viewbox范围（即SVG的viewbox视图将会比可视窗口小）。</li>
  <li><strong>slice</strong> - 图形将缩放到:
   <ul>
    <li>宽高比将会被保留</li>
    <li>整个视图窗口将覆盖viewbox</li>
    <li>SVG的viewbox属性将会被尽可能的缩小，但是仍然符合其他标准。</li>
   </ul>
   在这种情况下，如果SVG的viewbox宽高比与可视区域不匹配，则viewbox的某些区域将会延伸到视图窗口外部（即SVG的viewbox将会比可视窗口大）。</li>
 </ul>
 </dd>
</dl>

<h2 id="实例">实例</h2>

<h2 id="元素">元素</h2>

<p>以下元素可使用 <code>preserveAspectRatio</code> 属性</p>

<ul>
 <li>{{ SVGElement("svg") }}</li>
 <li>{{ SVGElement("symbol") }}</li>
 <li>{{ SVGElement("image") }}</li>
 <li>{{ SVGElement("feImage") }}</li>
 <li>{{ SVGElement("marker") }}</li>
 <li>{{ SVGElement("pattern") }}</li>
 <li>{{ SVGElement("view") }}</li>
</ul>