From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/svg/attribute/class/index.html | 189 +++++++++ files/de/web/svg/attribute/index.html | 467 +++++++++++++++++++++ .../svg/attribute/preserveaspectratio/index.html | 110 +++++ 3 files changed, 766 insertions(+) create mode 100644 files/de/web/svg/attribute/class/index.html create mode 100644 files/de/web/svg/attribute/index.html create mode 100644 files/de/web/svg/attribute/preserveaspectratio/index.html (limited to 'files/de/web/svg/attribute') 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 +--- +

« SVG Eigenschaft Referenz

+ +

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.

+ +

Der Klassenname eines Elements hat zwei Schlüsselfunktionen:

+ + + +

Sie können die Klasse verwenden um SVG mithilfe von CSS zu formatieren.

+ +

Nutzungskontext

+ + + + + + + + + + + + + + + + + + + + +
KategorienKeine
Wert<liste-von-klassen-namen>
AnimierbarJa
Normatives DokumentSVG 1.1 (2nd Edition): The class attribute
+ +

{{ page("/en/SVG/Content_type","List-of-Ts") }}

+ +

Beispiel

+ +
<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>
+ +

Elemente

+ +

Die folgenden ELemente können das class Attribut verwenden:

+ +
+ +
+ +

Browser-Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Animation support{{ CompatUnknown() }}{{ CompatGeckoDesktop("5") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 

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 +--- +

« SVG / SVG Element reference »

+ +

SVG Attributes

+ +
+

A

+ + + +

B

+ + + +

C

+ + + +

D

+ + + +

E

+ + + +

F

+ + + +

G

+ + + +

H

+ + + +

I

+ + + +

K

+ + + +

L

+ + + +

M

+ + + +

N

+ + + +

O

+ + + +

P

+ + + +

R

+ + + +

S

+ + + +

T

+ + + +

U

+ + + +

V

+ + + +

W

+ + + +

X

+ + + +

Y

+ + + +

Z

+ + +
+ +

Categories

+ +

Animation event attributes

+ +

{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}

+ +

Animation attribute target attributes

+ +

{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}

+ +

Animation timing attributes

+ +

{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}

+ +

Animation value attributes

+ +

{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}

+ +

Animation addition attributes

+ +

{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}

+ +

Conditional processing attributes

+ +

{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.

+ +

Core attributes

+ +

{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}, {{ SVGAttr("tabindex") }}

+ +

Document event attributes

+ +

{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}

+ +

Filter primitive attributes

+ +

{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}

+ +

Graphical event attributes

+ +

{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}

+ +

Presentation attributes

+ +
Note that all SVG presentation attributes can be used as CSS properties.
+ +

{{ 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") }}

+ +

Style attributes

+ +

{{ SVGAttr("class") }}, {{ SVGAttr("style") }}

+ +

Transfer function attributes

+ +

{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}

+ + + +

{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}

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 +--- +

« SVG Attribute reference home

+ +

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.
+
+ Das Attribut preserveAspectRatio legt fest, ob gleich- oder ungleichmäßige Skalierung angewandt wird.
+
+ Bei allen Elementen, die dieses Attribut unterstützen (siehe oben), außer dem {{ SVGElement("image") }} Element, ist preserveAspectRatio 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, preserveAspectRatio nicht aktiviert.
+
+ In {{ SVGElement("image") }} Elementen, gibt preserveAspectRatio 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.

+ +

Verwendungskontext

+ + + + + + + + + + + + + + + + + + + + +
KategorienNone
Inhalt<align> [<meetOrSlice>]
AnimierbarJa
Normative documentSVG 1.1 (2nd Edition)
+ +
+
<align>
+
Der <align> 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 <align> Parameter muss einen der folgenden Werte enthalten: +
    +
  • none
    + 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.
    + (Bemerkung: Wenn <align> den Wert none enthält, wird der Wert für <meetOrSlice> ignoriert.)
    • +
  • xMinYMin - Erzwinge gleichmäßige Skalierung.
    + Richte <min-x> der Element-{{ SVGAttr("viewBox") }} am kleinsten X-Wert des viewports aus.
    + Richte <min-y> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.
    • +
  • xMidYMin - Erzwinge gleichmäßige Skalierung.
    + Richte den X-Wert des Mittelpunktes der Element-{{ SVGAttr("viewBox") }} am X-Wert des viewport-Mittelpunktes aus.
    + Richte den  <min-y> der Element-{{ SVGAttr("viewBox") }} am kleinsten Y-Wert des viewports aus.
    • +
  • xMaxYMin - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the <min-y> of the element's {{ SVGAttr("viewBox") }} with the smallest Y value of the viewport.
    • +
  • xMinYMid - Force uniform scaling.
    + Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMidYMid (the default) - Force uniform scaling.
    + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMaxYMid - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the midpoint Y value of the element's {{ SVGAttr("viewBox") }} with the midpoint Y value of the viewport.
    • +
  • xMinYMax - Force uniform scaling.
    + Align the <min-x> of the element's {{ SVGAttr("viewBox") }} with the smallest X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
  • xMidYMax - Force uniform scaling.
    + Align the midpoint X value of the element's {{ SVGAttr("viewBox") }} with the midpoint X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
  • xMaxYMax - Force uniform scaling.
    + Align the <min-x>+<width> of the element's {{ SVGAttr("viewBox") }} with the maximum X value of the viewport.
    + Align the <min-y>+<height> of the element's {{ SVGAttr("viewBox") }} with the maximum Y value of the viewport.
    • +
+
+
<meetOrSlice>
+
The <meetOrSlice> parameter is optional and, if provided, is separated from the <align> value by one or more spaces and then must be one of the following strings: +
    +
  • meet (the default) - Scale the graphic such that: +
      +
    • aspect ratio is preserved
      • +
    • the entire {{ SVGAttr("viewBox") }} is visible within the viewport
      • +
    • the {{ SVGAttr("viewBox") }} is scaled up as much as possible, while still meeting the other criteria
      • +
    + 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).
    • +
  • slice - Scale the graphic such that: +
      +
    • aspect ratio is preserved
      • +
    • the entire viewport is covered by the {{ SVGAttr("viewBox") }}
      • +
    • the {{ SVGAttr("viewBox") }} is scaled down as much as possible, while still meeting the other criteria
      • +
    + 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).
    • +
+
+
+ +

Example

+ +

Elements

+ +

The following elements can use the preserveAspectRatio attribute

+ + -- cgit v1.2.3-54-g00ecf