diff options
Diffstat (limited to 'files/de/web/svg/attribute')
| -rw-r--r-- | files/de/web/svg/attribute/class/index.html | 189 | ||||
| -rw-r--r-- | files/de/web/svg/attribute/index.html | 467 | ||||
| -rw-r--r-- | files/de/web/svg/attribute/preserveaspectratio/index.html | 110 |
3 files changed, 766 insertions, 0 deletions
diff --git a/files/de/web/svg/attribute/class/index.html b/files/de/web/svg/attribute/class/index.html new file mode 100644 index 0000000000..919b06605c --- /dev/null +++ b/files/de/web/svg/attribute/class/index.html @@ -0,0 +1,189 @@ +--- +title: class +slug: Web/SVG/Attribute/class +translation_of: Web/SVG/Attribute/class +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Eigenschaft Referenz</a></p> + +<p>Weist einen Klassennamen oder eine Reihe von Klassennamen einem Element zu. Sie können den Klassennamen mehrfach einem Element zuweisen, oder auch zu mehreren Elementen zuweisen. Jedoch müssen Klassennamen mit einem Leerzeichen getrennt sein.</p> + +<p>Der Klassenname eines Elements hat zwei Schlüsselfunktionen:</p> + +<ul> + <li>Als Stil-Selektor, wenn ein Autor einen Satz von Elementen Stil-Informationen zuweist.</li> + <li>Als generelle Funktion für den Browser.</li> +</ul> + +<p>Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.</p> + +<h2 id="Nutzungskontext">Nutzungskontext</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Kategorien</th> + <td>Keine</td> + </tr> + <tr> + <th scope="row">Wert</th> + <td><a href="/en/SVG/Content_type#List-of-Ts" title="en/SVG/Content type#List-of-Ts"><liste-von-klassen-namen></a></td> + </tr> + <tr> + <th scope="row">Animierbar</th> + <td>Ja</td> + </tr> + <tr> + <th scope="row">Normatives Dokument</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/styling.html#ClassAttribute" title="http://www.w3.org/TR/SVG/styling.html#ClassAttribute">SVG 1.1 (2nd Edition): The class attribute</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","List-of-Ts") }}</p> + +<h2 id="Beispiel">Beispiel</h2> + +<pre class="brush: html"><html> + <body> + <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + <![CDATA[ + rect.rectClass { + stroke: #000066; + fill: #00cc00; + } + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + ]]> + </style> + + <rect class="rectClass" x="10" y="10" width="100" height="100"/> + <circle class="circleClass" cx="40" cy="50" r="26"/> + </svg> + </body> +</html></pre> + +<h2 id="Elemente">Elemente</h2> + +<p>Die folgenden ELemente können das <code>class</code> Attribut verwenden:</p> + +<div class="threecolumns"> +<ul> + <li>{{ SVGElement("a") }}</li> + <li>{{ SVGElement("altGlyph") }}</li> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("clipPath") }}</li> + <li>{{ SVGElement("defs") }}</li> + <li>{{ SVGElement("desc") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("feBlend") }}</li> + <li>{{ SVGElement("feColorMatrix") }}</li> + <li>{{ SVGElement("feComponentTransfer") }}</li> + <li>{{ SVGElement("feComposite") }}</li> + <li>{{ SVGElement("feConvolveMatrix") }}</li> + <li>{{ SVGElement("feDiffuseLighting") }}</li> + <li>{{ SVGElement("feDisplacementMap") }}</li> + <li>{{ SVGElement("feFlood") }}</li> + <li>{{ SVGElement("feGaussianBlur") }}</li> + <li>{{ SVGElement("feImage") }}</li> + <li>{{ SVGElement("feMerge") }}</li> + <li>{{ SVGElement("feMorphology") }}</li> + <li>{{ SVGElement("feOffset") }}</li> + <li>{{ SVGElement("feSpecularLighting") }}</li> + <li>{{ SVGElement("feTile") }}</li> + <li>{{ SVGElement("feTurbulence") }}</li> + <li>{{ SVGElement("filter") }}</li> + <li>{{ SVGElement("font") }}</li> + <li>{{ SVGElement("foreignObject") }}</li> + <li>{{ SVGElement("g") }}</li> + <li>{{ SVGElement("glyph") }}</li> + <li>{{ SVGElement("glyphRef") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("line") }}</li> + <li>{{ SVGElement("linearGradient") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("mask") }}</li> + <li>{{ SVGElement("missing-glyph") }}</li> + <li>{{ SVGElement("path") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("polygon") }}</li> + <li>{{ SVGElement("polyline") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> + <li>{{ SVGElement("rect") }}</li> + <li>{{ SVGElement("stop") }}</li> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("switch") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("text") }}</li> + <li>{{ SVGElement("textPath") }}</li> + <li>{{ SVGElement("title") }}</li> + <li>{{ SVGElement("tref") }}</li> + <li>{{ SVGElement("tspan") }}</li> + <li>{{ SVGElement("use") }}</li> +</ul> +</div> + +<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td>Animation support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatGeckoDesktop("5") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/de/web/svg/attribute/index.html b/files/de/web/svg/attribute/index.html new file mode 100644 index 0000000000..ddda2e93cb --- /dev/null +++ b/files/de/web/svg/attribute/index.html @@ -0,0 +1,467 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> + +<h2 id="SVG_Attributes">SVG Attributes</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("href") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tabindex") }}</li> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_event_attributes">Animation event attributes</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="Animation_attribute_target_attributes">Animation attribute target attributes</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Animation_value_attributes">Animation value attributes</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> + +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Core_attributes">Core attributes</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}</p> + +<h3 id="Document_event_attributes">Document event attributes</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Presentation_attributes">Presentation attributes</h3> + +<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Style_attributes">Style attributes</h3> + +<p>{{ SVGAttr("class") }}, {{ SVGAttr("style") }}</p> + +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_attributes">XLink attributes</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> 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> |