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
|
---
title: preserveAspectRatio
slug: Web/SVG/Attribute/preserveAspectRatio
translation_of: Web/SVG/Attribute/preserveAspectRatio
---
<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>In einigen Fällen, meistens wenn man das {{ SVGAttr("viewBox") }} Attribut benutzt, ist es wünschenswert die Grafik so zu skalieren, dass sie auch mit ungleichem (non-uniform) Seitenverhältnis den gesamten viewport einnimmt. Ein anderer Fall wäre es, mit gleichmäßiger (uniform) Skalierung die Seitenverhältnise der Grafik beizubehalten.<br>
<br>
Das Attribut <code>preserveAspectRatio</code> legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.<br>
<br>
Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem {{ SVGElement("image") }} Element, ist <code>preserveAspectRatio</code> nur wirksam, wenn auch ein Wert für {{ SVGAttr("viewBox") }} im gleichen Element angegeben wurde. Für diese Elemente ist, wenn das Attribut {{ SVGAttr("viewBox") }} nicht angegeben wurde, <code>preserveAspectRatio</code> nicht aktiviert.<br>
<br>
In {{ SVGElement("image") }} Elementen, gibt <code>preserveAspectRatio</code> an, wie die darin verlinkten Bilder sich in den Referenz-Rahmen einpassen und ob die Seitenverhältnisse des verlinkten Bildes, unter Beachtung des momentanen Benutzer-Koordinatensystems, beibehalten werden sollen.</p>
<h2 id="Verwendungskontext">Verwendungskontext</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Kategorien</th>
<td>None</td>
</tr>
<tr>
<th scope="row">Inhalt</th>
<td><align> [<meetOrSlice>]</td>
</tr>
<tr>
<th scope="row">Animierbar</th>
<td>Ja</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><align></dt>
<dd>Der <code><align></code> Parameter bestimmt ob gleichmäßige Skalierung benutzt wird und wenn dies der Fall ist, die Ausrichtungs-Methode die genutzt wird, im Fall, dass das Seitenverhältnis der {{ SVGAttr("viewBox") }} nicht dem Seitenverhältnis des viewports entspricht. Der <code><align></code> Parameter muss einen der folgenden Werte enthalten:
<ul>
<li><strong>none</strong><br>
Keine einheitliche Skalierung erzwingen. Skaliere die Grafiken des gegebenen Elements ungleichmäßig, wenn notwendig, so dass die bounding-box (Begrenzungs-Rahmen) exakt dem viewport-rectangle (Rechteck des Sichtbereichs) entspricht.<br>
(Bemerkung: Wenn <code><align></code> den Wert <code>none</code> enthält, wird der Wert für <code><meetOrSlice></code> ignoriert.)</li>
<li><strong>xMinYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
Richte <code><min-x></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten X-Wert des viewports aus.<br>
Richte <code><min-y></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li>
<li><strong>xMidYMin</strong> - Erzwinge gleichmäßige Skalierung.<br>
Richte den X-Wert des Mittelpunktes der Element-{{ SVGAttr("viewBox") }} am X-Wert des viewport-Mittelpunktes aus.<br>
Richte den <code><min-y></code> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.</li>
<li><strong>xMaxYMin</strong> - Force uniform scaling.<br>
Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
Align the <code><min-y></code> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.</li>
<li><strong>xMinYMid</strong> - Force uniform scaling.<br>
Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
<li><strong>xMidYMid</strong> (the default) - Force uniform scaling.<br>
Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
<li><strong>xMaxYMid</strong> - Force uniform scaling.<br>
Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.</li>
<li><strong>xMinYMax</strong> - Force uniform scaling.<br>
Align the <code><min-x></code> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.<br>
Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
<li><strong>xMidYMax</strong> - Force uniform scaling.<br>
Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.<br>
Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
<li><strong>xMaxYMax</strong> - Force uniform scaling.<br>
Align the <code><min-x>+<width></code> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.<br>
Align the <code><min-y>+<height></code> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.</li>
</ul>
</dd>
<dt><meetOrSlice></dt>
<dd>The <code><meetOrSlice></code> parameter is optional and, if provided, is separated from the <code><align></code> value by one or more spaces and then must be one of the following strings:
<ul>
<li><strong>meet</strong> (the default) - Scale the graphic such that:
<ul>
<li>aspect ratio is preserved</li>
<li>the entire {{ SVGAttr("viewBox") }} is visible within the viewport</li>
<li>the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria</li>
</ul>
In this case, if the aspect ratio of the graphic does not match the viewport, some of the viewport will extend beyond the bounds of the {{ SVGAttr("viewBox") }} (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw will be smaller than the viewport).</li>
<li><strong>slice</strong> - Scale the graphic such that:
<ul>
<li>aspect ratio is preserved</li>
<li>the entire viewport is covered by the {{ SVGAttr("viewBox") }}</li>
<li>the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria</li>
</ul>
In this case, if the aspect ratio of the {{ SVGAttr("viewBox") }} does not match the viewport, some of the {{ SVGAttr("viewBox") }} will extend beyond the bounds of the viewport (i.e., the area into which the {{ SVGAttr("viewBox") }} will draw is larger than the viewport).</li>
</ul>
</dd>
</dl>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>preserveAspectRatio</code> attribute</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>
|
