diff options
Diffstat (limited to 'files/de/web/svg/attribute/preserveaspectratio/index.html')
| -rw-r--r-- | files/de/web/svg/attribute/preserveaspectratio/index.html | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/files/de/web/svg/attribute/preserveaspectratio/index.html b/files/de/web/svg/attribute/preserveaspectratio/index.html new file mode 100644 index 0000000000..71db4f5225 --- /dev/null +++ b/files/de/web/svg/attribute/preserveaspectratio/index.html @@ -0,0 +1,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> |