From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../web/svg/tutorial/einf\303\274hrung/index.html" | 21 -- files/de/web/svg/tutorial/introduction/index.html | 21 ++ files/de/web/svg/tutorial/paths/index.html | 239 +++++++++++++++++++++ files/de/web/svg/tutorial/pfade/index.html | 239 --------------------- files/de/web/svg/tutorial/svg_fonts/index.html | 99 +++++++++ .../web/svg/tutorial/svg_schriftarten/index.html | 99 --------- 6 files changed, 359 insertions(+), 359 deletions(-) delete mode 100644 "files/de/web/svg/tutorial/einf\303\274hrung/index.html" create mode 100644 files/de/web/svg/tutorial/introduction/index.html create mode 100644 files/de/web/svg/tutorial/paths/index.html delete mode 100644 files/de/web/svg/tutorial/pfade/index.html create mode 100644 files/de/web/svg/tutorial/svg_fonts/index.html delete mode 100644 files/de/web/svg/tutorial/svg_schriftarten/index.html (limited to 'files/de/web/svg') diff --git "a/files/de/web/svg/tutorial/einf\303\274hrung/index.html" "b/files/de/web/svg/tutorial/einf\303\274hrung/index.html" deleted file mode 100644 index 9e4250ed20..0000000000 --- "a/files/de/web/svg/tutorial/einf\303\274hrung/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Einführung -slug: Web/SVG/Tutorial/Einführung -tags: - - SVG - - 'SVG:Tutorial' -translation_of: Web/SVG/Tutorial/Introduction ---- -

{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

-

-

SVG ist eine XML-Sprache, vergleichbar mit XHTML, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.

-

SVG erschien im Jahre 1999 nachdem mehrere Formate zum W3C eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während HTML:Canvas oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.

-

Vor dem Beginn

-

Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel Inkscape, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie JavaScript oder CSS).

-

SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im SVG Wiki. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.

-

Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:

- -

SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die Elementreferenz und die Schnittstellenreferenz zu verwenden, um alles Weitere zu finden.

-

{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

-

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/de/web/svg/tutorial/introduction/index.html b/files/de/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..9e4250ed20 --- /dev/null +++ b/files/de/web/svg/tutorial/introduction/index.html @@ -0,0 +1,21 @@ +--- +title: Einführung +slug: Web/SVG/Tutorial/Einführung +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Introduction +--- +

{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

+

+

SVG ist eine XML-Sprache, vergleichbar mit XHTML, die zum zeichnen von Grafiken benutzt werden kann (wie die Grafik auf der rechten Seite). Die Bilder können entweder mit den benötigten Linien und Formen, oder durch Veränderungen an bereits bestehende Rasterbildern erstellt werden. Eine Kombinationen aus beiden Möglichkeiten ist auch möglich. Das Bild und deren Komponenten können auch umgewandelt, zusammengestellt oder gefiltert werden, um das Aussehen komplett zu verändern.

+

SVG erschien im Jahre 1999 nachdem mehrere Formate zum W3C eingeschickt wurden und gescheitert sind, um ratifiziert zu werden. Während die Spezifikationen im Laufe der Zeit erweitert wurden, sind die Browserimplementationen nur langsam fortgeschritten, und so gibt es nur wenige SVG-Inhalte, die heutzutage im Web genutzt werden (2009). Die Implementationen werden nur langsam weiterentwickelt, während HTML:Canvas oder Adobe Flash sehr schnell weiterentwickelt werden und dadurch schon sehr ausgereift sind. SVG bietet Vorteile gegenüber beiden Technologien: Eine DOM Schnittstelle ist verfügbar und es wird keine Drittanbieter-Erweiterung für den Browser benötigt, um die Inhalte darzustellen. Ob man SVG verwendet oder nicht, hängt häufig davon ab, wofür es verwendet werden soll.

+

Vor dem Beginn

+

Es gibt eine Reihe von Grafikprogramme, wie zum Beispiel Inkscape, welche kostenlos sind und SVG als natives Dateiformat benutzen. Dieses Tutorial hält sich jedoch an einen Texteditor ihrer Wahl, um SVG Dateien zu erstellen. Die Idee ist, SVG als solches zu verstehen und das geht am Besten, in dem man selbst Hand anlegt, um ein bisschen Markup zu schreiben. Nicht alle SVG Viewer sind gleich und daher ist die Wahrscheinlichkeit groß, dass etwas, was für eine bestimmte Anwendung geschrieben wurde, nicht exakt gleich in einem anderem Programm aussieht. Das liegt einfach an der unterschiedlichen Unterstützung der SVG Spezifikation oder anderen Technologien, die ebenfalls verwendet werden (wie JavaScript oder CSS).

+

SVG wird nicht in allen modernen Browsern vollständig unterstützt (obwohl es nach und nach kommt). Eine ziemlich vollständige Liste von SVG Viewern findet sich im SVG Wiki. Firefox unterstützt einige SVG Inhalte seit Version 1.5 und mit jedem Release kommt ein Stück dazu. Mit diesem Tutorial kann das MDC vielleicht einigen Entwicklern helfen, auf dem neustem Stand, im Vergleich der Gecko Implementation mit anderen Implementationen, zu bleiben.

+

Bevor man anfängt sich mit SVG auseinander zu setzen, sollte ein grundlegendes Verständnis von XML oder anderen Auszeichnungssprachen wie HTML vorhanden sein. Falls Sie nicht so ganz mit XML vertraut sein sollten, sind hier ein paar Richtlinien an die man sich halten sollte:

+ +

SVG ist eine große Spezifikation. Dieses Tutorial versucht die Grundlagen zu behandeln. Wenn Sie erstmal mit den Grundlagen vertraut sind, sollten Sie in der Lage sein die Elementreferenz und die Schnittstellenreferenz zu verwenden, um alles Weitere zu finden.

+

{{ PreviousNext("SVG/Tutorial", "SVG/Tutorial/Erste_Schritte") }}

+

{{ languages( { "en": "en/SVG/Tutorial/Introduction", "fr": "fr/SVG/Tutoriel/Introduction", "ja": "ja/SVG/Tutorial/Introduction" } ) }}

diff --git a/files/de/web/svg/tutorial/paths/index.html b/files/de/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..fcf1e30859 --- /dev/null +++ b/files/de/web/svg/tutorial/paths/index.html @@ -0,0 +1,239 @@ +--- +title: Pfade +slug: Web/SVG/Tutorial/Pfade +tags: + - Fortgeschritten + - HilfeBenötigt + - InhaltBenötigt + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+ +

Das <path> Element ist das mächtigste Element in der SVG Sammlung der grundlegenden Elemente. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.

+ +

Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als Polylines erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.

+ +

Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in grundlegende Formen). Das "d" Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.

+ +

Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.

+ +

Alle dieser Befehle gibt es in zwei Varianten. Ein Grossbuchstabe gibt absolute Koordinaten auf der Seite an und ein Kleinbuchstabe gibt relative Koordinaten (z.B. verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links).

+ +

Koordinaten im "d" Attribute sind immer einheitslos und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.

+ +

Linienbefehle

+ +

Es gibt fünf Linienbefehle für <path> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine  Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :

+ +
M x y
+
+ +

oder

+ +
m dx dy
+ +

Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Punkte -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>
+ +

Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit L. L benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.

+ +
 L x y (oder l dx dy)
+
+ +

Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. H zeichnet eine horizontale Line und V zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.

+ +
 H x (oder h dx)
+ V y (oder v dy)
+
+ +

Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <rect> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt:

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Punkte -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>
+ +

Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit Z aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.

+ +
 Z (oder z)
+
+ +

Unser Pfad könnte also zu folgendem abgekürzt werden:

+ +
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:

+ +
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.

+ +

In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.

+ +

Kurvenbefehle

+ +

Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.

+ +

Bezier-Kurven

+ +

Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.

+ +
 C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy)
+
+ +

Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+
+ +

Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.

+ +

Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl S (oder s) definiert wird.

+ +
 S x2 y2, x y (oder s dx2 dy2, dx dy)
+
+ +

S erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen S- oder C-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl S nicht einem anderen S- oder C-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der Q-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.

+ +

ShortCut_Cubic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. dx und dy sind nicht relativ zu dx1 und dx2).

+ +
 Q x1 y1, x y (oder q dx1 dy1, dx dy)
+
+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.

+ +
 T x y (oder t dx dy)
+
+ +

Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.

+ +
+

Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.

+
+ +

Shortcut_Quadratic_Bezier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.

+ +

Bögen

+ +

Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:

+ +
 A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y
+ a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy
+
+ +

An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie Ellipsen nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.

+ +

Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+ +

Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.

+ +

Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.

+ +

Show the 4 arcs on the Ellipse example

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
+  <path d="M10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
+  <circle cx="110" cy="215" r="2" fill="red"/>
+  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
+  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
+</svg>
+
+ +

Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.

+ +

Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.

+ +

Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.

+ +

Falls sie SVG aus Canvas herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: http://codepen.io/lingtalfi/pen/yaLWJG (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/de/web/svg/tutorial/pfade/index.html b/files/de/web/svg/tutorial/pfade/index.html deleted file mode 100644 index fcf1e30859..0000000000 --- a/files/de/web/svg/tutorial/pfade/index.html +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: Pfade -slug: Web/SVG/Tutorial/Pfade -tags: - - Fortgeschritten - - HilfeBenötigt - - InhaltBenötigt - - SVG - - 'SVG:Tutorial' -translation_of: Web/SVG/Tutorial/Paths ---- -

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

- -

Das <path> Element ist das mächtigste Element in der SVG Sammlung der grundlegenden Elemente. Man kann es zur Erstellung von Linien, Kurven, Bögen und weiterem verwenden.

- -

Pfade bilden komplexe Formen beim Kombinieren mehrerer gerader Linien oder Kurven. Komplexe Formen, die nur aus geraden Linien bestehen, können als Polylines erstellt werden. Während Polylines und Pfade ähnlich aussehende Formen bilden können benötigen Polylines viele kleine geraden Linien um Kurven zu simulieren und werden nicht gut auf grössere Grössen skaliert. Ein gutes Verständnis der Pfade ist wichtig beim zeichen von SVGs. Während das Erstellen komplexer Pfade mit einem XML Editor oder Texteditor nicht empfohlen wird, hilft das Verständnis derer Funktionsweise Anzeigeprobleme in SVGs zu identifizieren und zu beheben.

- -

Die Form eines Pfad-Elements wird durch ein Attribut definiert: {{ SVGAttr("d") }} (weiteres in grundlegende Formen). Das "d" Attribut beinhaltet eine Folge an Befehlen und deren benötigten Parametern.

- -

Jeder dieser Befehle wird instanziert (z.B. das Erstellen einer Klasse, deren Benennung oder deren Lokalisierung) mit einem bestimmten Buchstaben. Beispielsweise: Verschiebe zur x- und y-Koordinate (10, 10). Der "Move to" Befehl wird mit dem Buchstaben M aufgerufen. Wenn der Parser zu diesem Buchstaben kommt, weiss er, dass eine Verschiebung zu einem Punkt erwünscht ist. Um nun also eine Verschiebung zu (10, 10) vorzunehmen, würde man den Befehl "M 10 10" benutzen. Danach liest der Parser der nächsten Befehl aus.

- -

Alle dieser Befehle gibt es in zwei Varianten. Ein Grossbuchstabe gibt absolute Koordinaten auf der Seite an und ein Kleinbuchstabe gibt relative Koordinaten (z.B. verschiebe vom vorherigen Punkt 10px nach oben und 7px nach links).

- -

Koordinaten im "d" Attribute sind immer einheitslos und somit im Benutzerkoordinatensystem. Später wird erläutert, wie Pfade transformiert werden können um anderen Bedürfnissen gerecht zu werden.

- -

Linienbefehle

- -

Es gibt fünf Linienbefehle für <path> Elemente. Der erste Befehl ist der "Move To" Befehl oder M, welcher oben beschrieben wurde. Er benötigt zwei Argumente, eine  Koordinate 'x' und eine Koordinate 'y' zu denen verschoben werden soll. Falls sich der Cursor bereits irgendwo auf der Seite befindet, wird keine Linie gezeichnet, um diese beiden Punkte zu verbinden. Der "Move To" Befehl erscheint am Anfang von Pfaddefinitionen, um festzulegen, wo mit der Zeichnung begonnen werden soll. z.B. :

- -
M x y
-
- -

oder

- -
m dx dy
- -

Im folgenden Beispiel habe wir nur einen Punkt bei (10,10). Beachten Sie allerdings, dass er nicht angezeigt würde, falls sie den Pfad normal zeichnen. Zum Beispiel:

- -
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10"/>
-
-  <!-- Punkte -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-
-</svg>
- -

Es gibt drei Befehle, mit denen Linien gezeichnet werden können. Am typischsten ist der "Line To" Befehl, aufgerufen mit L. L benötigt zwei Parameter – x und y Koordinaten – und zeichnet eine Linie von der aktuellen Position zu einer neuen Position.

- -
 L x y (oder l dx dy)
-
- -

Es gibt zwei abgekürzte Formen um horizontale und vertikale Linien zu zeichnen. H zeichnet eine horizontale Line und V zeichnet eine vertikale Linie. Beide Befehle benötigen nur ein Argument, da sie nur in eine Richtung verschieben.

- -
 H x (oder h dx)
- V y (oder v dy)
-
- -

Eine einfache Anwendung ist das Zeichnen einer Form. Wir werden mit einem Rechteck beginnen (die Art, die auch einfacher mit dem <rect> Element erstellt werden könnte). Es wird nur aus horizontalen und vertikalen Linien zusammengestellt:

- -

- -
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>
-
-  <!-- Punkte -->
-  <circle cx="10" cy="10" r="2" fill="red"/>
-  <circle cx="90" cy="90" r="2" fill="red"/>
-  <circle cx="90" cy="10" r="2" fill="red"/>
-  <circle cx="10" cy="90" r="2" fill="red"/>
-
-</svg>
- -

Wir können die obige Pfaddefinition ein wenig kürzen, indem wir den "Close Path" Befehl verwenden, welcher mit Z aufgerufen wird. Dieser Befehl zeichnet eine gerade Linie von der aktuellen Position zum ersten Punkt des Pfades. Er wird oft am Ende eines Pfad Elements verwendet, allerdings nicht immer. Es gibt keinen unterschied zwischen dem gross oder klein geschriebenen Befehl.

- -
 Z (oder z)
-
- -

Unser Pfad könnte also zu folgendem abgekürzt werden:

- -
 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
-
- -

Sie können auch die relative Form dieser Befehle verwenden, um das gleiche Bild zu zeichnen. Relative Befehle werden mit Kleinbuchstaben aufgerufen und anstatt den Cursor auf eine genaue Koordinate zu bewegen, bewegen sie ihn relativ zu seiner letzten Position. Da unsere Box beispielsweise 80 x 80 ist, hätte das Pfad-Element so geschrieben werden können:

- -
 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
-
- -

Der Pfad bewegt sich zu Punkt (10,10) und bewegt sich dann horizontal um 80 Punkte nach rechts, dann um 80 Punkte nach unten, dann um 80 Punkte nach links und dann zurück zum Anfang.

- -

In diesen Beispielen wäre es wahrscheinlich einfacher, die Elemente <polygon> oder <polyline> zu verwenden. Allerdings werden Pfade beim Zeichnen von SVG so oft verwendet, dass Entwickler es stattdessen bequemer finden, diese zu verwenden. Es gibt keine wirkliche Leistungseinbußen oder -verbesserungen für die Nutzung des einen oder anderen.

- -

Kurvenbefehle

- -

Es gibt drei verschiedene Befehle, mit denen Sie gleichmäßige Kurven erstellen können. Zwei dieser Kurven sind Bezier-Kurven, und die dritte ist ein "Bogen" oder Teil eines Kreises. Möglicherweise haben Sie bereits praktische Erfahrungen mit Bezier-Kurven mit Pfadwerkzeugen in Inkscape, Illustrator oder Photoshop gesammelt. Eine vollständige Beschreibung der Mathematik hinter Bezier-Kurven finden Sie in einer Referenz wie der auf Wikipedia. Es gibt eine unendliche Anzahl von Bezier-Kurven, aber nur zwei einfache sind in Pfadelementen verfügbar: eine kubische, die mit C aufgerufen wird, und eine quadratische, die mit Q aufgerufen wird.

- -

Bezier-Kurven

- -

Die kubische Kurve C, ist die etwas komplexere Kurve. Kubische Beziers nehmen zwei Kontrollpunkte für jeden Punkt in Anspruch. Um einen kubischen Bezier zu erstellen, müssen Sie daher drei Koordinatenpaare angeben.

- -
 C x1 y1, x2 y2, x y (oder c dx1 dy1, dx2 dy2, dx dy)
-
- -

Das letzte Koordinatenpaar hier (x,y) ist der Punkt, an welchem die Linie enden soll. Die anderen beiden sind Kontrollpunkte. (x1,y1) ist der Kontrollpunkt für die Anfangsposition Ihrer Kurve, und (x2,y2) ist der Kontrollpunkt der Endposition. Die Kontrollpunkte beschreiben im Wesentlichen die Neigung Ihrer Linie ab den jeweiligen Punkten. Die Bezier-Funktion erstellt dann eine gleichmäßige Kurve, die Sie von der Neigung, die Sie am Anfang Ihrer Linie festgelegt haben, auf die Neigung am anderen Ende verschiebt.

- -

Cubic Bézier Curves with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-
-  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
-  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
-  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
-  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
-  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
-  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
-  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
-  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
-  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
-
-</svg>
-
- -

Das obige Beispiel erstellt neun kubische Bezier-Kurven. Wenn sich die Kurven nach rechts bewegen, werden die Kontrollpunkte horizontal gespreizt. Wenn sich die Kurven nach unten bewegen, werden sie weiter von den Endpunkten getrennt. Zu beachten ist hier, dass die Kurve in Richtung des ersten Kontrollpunktes beginnt und sich dann so biegt, dass sie in Richtung des zweiten Kontrollpunktes verläuft.

- -

Es ist möglich, mehrere Bezier-Kurven aneinander zu reihen, um erweiterte, gleichmäßige Formen zu erzeugen. Häufig ist der Kontrollpunkt auf der einen Seite eines Punktes eine Reflexion des Kontrollpunktes auf der anderen Seite, um die Steigung konstant zu halten. In diesem Fall können Sie eine abgekürzte Version des kubischen Bezier verwenden, die durch den Befehl S (oder s) definiert wird.

- -
 S x2 y2, x y (oder s dx2 dy2, dx dy)
-
- -

S erstellt den selben Kurventyp wie zuvor. Wenn er aber einem anderen S- oder C-Befehl folgt, wird angenommen, dass der erste Kontrollpunkt eine Reflexion des zuvor verwendeten ist. Folgt der Befehl S nicht einem anderen S- oder C-Befehl, so wird die aktuelle Position des Cursors als erster Kontrollpunkt verwendet. In diesem Fall ist das Ergebnis das gleiche wie das, was der Q-Befehl mit den gleichen Parametern ergeben hätte. Ein Beispiel für diese Syntax ist unten dargestellt, und in der Abbildung links sind die angegebenen Kontrollpunkte rot und der daraus abgeleitete Kontrollpunkt blau dargestellt.

- -

ShortCut_Cubic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Die andere Art von Bezierkurve, die quadratische Kurve, die mit Q aufgerufen wird, ist eigentlich eine einfachere Kurve als die kubische. Sie benötigt einen Kontrollpunkt, der die Neigung der Kurve sowohl am Startpunkt als auch am Endpunkt bestimmt. Es werden zwei Argumente benötigt: der Kontrollpunkt und der Endpunkt der Kurve. Beachten Sie, dass die Koordinatendeltas für q beide relativ zum vorherigen Punkt sind (d.h. dx und dy sind nicht relativ zu dx1 und dx2).

- -
 Q x1 y1, x y (oder q dx1 dy1, dx dy)
-
- -

Quadratic Bézier with grid

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Genau wie bei der kubischen Bezierkurve gibt es eine Abkürzung zum Aneinanderreihen mehrerer quadratischer Beziers, die mit T aufgerufen wird.

- -
 T x y (oder t dx dy)
-
- -

Diese Abkürzung betrachtet den vorherigen Kontrollpunkt, den Sie verwendet haben, und leitet daraus einen neuen ab. Das bedeutet, dass Sie nach Ihrem ersten Kontrollpunkt ziemlich komplexe Formen erstellen können, indem Sie nur Endpunkte angeben.

- -
-

Das funktioniert nur, wenn der vorherige Befehl ein Q- oder T-Befehl war. Wenn dies nicht der Fall ist, wird davon ausgegangen, dass der Kontrollpunkt derselbe wie der vorherige Punkt ist, und Sie zeichnen nur Linien.

-
- -

Shortcut_Quadratic_Bezier_with_grid.png

- -
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
-</svg>
- -

Beide Kurven liefern ähnliche Ergebnisse, obwohl die kubische Form Ihnen mehr Freiheit bei der Gestaltung Ihrer Kurve gibt. Die Entscheidung, welche Kurve Sie verwenden möchten, hängt von der Symmetrie ab, die Ihre Linie hat.

- -

Bögen

- -

Die andere Art von Kurvenlinie, die Sie mit SVG erstellen können, ist der Bogen, der mit A aufgerufen wird. Bogen sind Kreis- oder Ellipsenabschnitte. Bei einem gegebenen x-Radius und y-Radius gibt es zwei Ellipsen, die zwei beliebige Punkte verbinden können (sofern sie sich im Kreisradius befinden). Entlang einer dieser Kreise gibt es zwei mögliche Pfade, die Sie wählen können, um die Punkte zu verbinden, so dass in jeder Situation vier mögliche Bögen zur Verfügung stehen. Aus diesem Grund sind bei Bögen eine ganze Reihe von Argumenten erforderlich:

- -
 A rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag x y
- a rx ry x-Achsen-Drehung Bogen-Flag Ausschwenkungs-Flag dx dy
-
- -

An seinem Anfang nimmt das Bogenelement zwei Argumente für den x-Radius und den y-Radius auf. Falls benötigt, schlagen sie Ellipsen nach, um deren Verhaltensweisen zu verstehen. Die letzten beiden Argumente bezeichnen die x- und y-Koordinaten um den Konturverlauf zu beenden. Zusammen bilden diese vier Werte die Grundstruktur des Bogens.

- -

Der dritte Parameter beschreibt die Drehung des Bogens. Dies lässt sich am besten an einem Beispiel erklären:

- -

SVGArcs_XAxisRotation_with_grid

- -
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
-  <path d="M10 315
-           L 110 215
-           A 30 50 0 0 1 162.55 162.45
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-</svg>
- -

Dieses Beispiel zeigt ein Pfad-Element, welches diagonal über die Seite verläuft. In dessen Mitte wurden zwei elliptische Bögen (x-Radius = 30, y-Radius = 50) ausgeschnitten. Im ersten Bogen wurde die x-Achsen-Rotation bei 0 gelassen, damit die Ellipse, um die der Bogen verläuft (in grau abgebildet) gerade nach oben und unten ausgerichtet wird. Im zweiten Bogen wurde die x-Achsen-Rotation allerdings auf -45 Grad gesetzt. Das dreht die Ellipse, damit sie mit der kürzeren Achse der Pfadrichtung ausgerichtet wird, wie im Beispielbild durch die zweite Ellipse dargestellt.

- -

Für die ungedrehte Ellipse im obigen Bild gibt es zwei verschiedene Bögen, zwischen denen gewählt werden kann, nicht vier, da die Linie, die vom Anfang bis zum Ende des Bogens durch die Mitte der Ellipse verläuft. In einem leicht veränderten Beispiel können Sie die zwei Ellipsen sehen, die die vier verschiedenen Bögen bilden.

- -

Show the 4 arcs on the Ellipse example

- -
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
-  <path d="M10 315
-           L 110 215
-           A 36 60 0 0 1 150.71 170.29
-           L 172.55 152.45
-           A 30 50 -45 0 1 215.1 109.9
-           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
-  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
-  <circle cx="110" cy="215" r="2" fill="red"/>
-  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
-  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
-</svg>
-
- -

Beachten Sie, dass jede der blauen Ellipsen aus zwei Bögen besteht, je nachdem, ob Sie im oder gegen den Uhrzeigersinn verfahren. Jede Ellipse hat einen kurzen und einen langen Bogen. Die beiden Ellipsen sind nur Spiegelungen voneinander. Sie werden entlang der Linie gespiegelt, die sich aus den Start->Endpunkten ergibt.

- -

Wenn die Start->Endpunkte weiter entfernt sind, als der x- und y-Radius der Ellipse reicht, werden die Radien der Ellipse minimal erweitert, so dass sie die Start->Endpunkte erreichen können. Der interaktive Codepen am Ende dieser Seite zeigt dies exemplarisch. Um festzustellen, ob die Radien Ihrer Ellipse groß genug sind, um erweitert werden zu müssen, müssen Sie ein Gleichungssystem wie dieses auf Wolfram Alpha lösen. Diese Berechnung gilt für die nicht rotierende Ellipse mit Start->Ende (110, 215)->(150.71, 170.29). Die Lösung, (x, y), ist das Zentrum der Ellipse(n). Die Lösung wird imaginär sein, falls Ihre Ellipsenradien zu klein sind. Diese zweite Berechnung bezieht sich auf die nicht rotierende Ellipse mit Start->Ende (110, 215)->(162.55, 162.45). Die Lösung hat eine kleine Imaginärkomponente, da die Ellipse nur knapp erweitert wurde.

- -

Die vier verschiedenen oben genannten Pfade werden durch die nächsten beiden Argument-Flags bestimmt. Wie bereits erwähnt, gibt es immer noch zwei mögliche Ellipsen für den Pfad, um sich zu bewegen, und zwei verschiedene mögliche Pfade auf beiden Ellipsen, was vier mögliche Pfade ergibt. Das erste Argument ist das Bogen-Flag. Es bestimmt einfach, ob der Bogen größer oder kleiner als 180 Grad sein soll; am Ende bestimmt dieses Flag, in welche Richtung sich der Bogen um einen gegebenen Kreis bewegt. Das zweite Argument ist das Ausschwenkungs-Flag. Es legt fest, ob sich der Bogen in positiven oder negativen Winkeln bewegen soll, was im Wesentlichen bestimmt, um welchen der beiden Kreise Sie sich bewegen werden. Das folgende Beispiel zeigt alle vier möglichen Kombinationen sowie die beiden Kreise für die einzelnen Fälle.

- -

- -
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
-  <path d="M80 80
-           A 45 45, 0, 0, 0, 125 125
-           L 125 80 Z" fill="green"/>
-  <path d="M230 80
-           A 45 45, 0, 1, 0, 275 125
-           L 275 80 Z" fill="red"/>
-  <path d="M80 230
-           A 45 45, 0, 0, 1, 125 275
-           L 125 230 Z" fill="purple"/>
-  <path d="M230 230
-           A 45 45, 0, 1, 1, 275 275
-           L 275 230 Z" fill="blue"/>
-</svg>
- -

Bögen sind eine einfache Möglichkeit, Kreise oder Ellipsen in Ihren Zeichnungen zu erstellen. Zum Beispiel würde ein Kreisdiagramm für jedes Stück einen anderen Bogen erfordern.

- -

Falls sie SVG aus Canvas herleiten können Bögen die meisten Verständnisprobleme verursachen, allerdings sind sie auch viel mächtiger. Vollständige Kreise und Ellipsen sind eigentlich die einzigen Formen, bei denen SVG-Bögen Probleme beim Zeichnen haben. Da der Start- und Endpunkt für jeden Pfad, der um einen Kreis verläuft, der gleiche Punkt ist, gibt es eine unendliche Anzahl von Kreisen, die ausgewählt werden können, und der tatsächliche Pfad ist undefiniert. Es ist möglich, sie anzunähern, indem man den Start- und Endpunkt des Pfades leicht schräg stellt und ihn dann mit einem anderen Pfadsegment verbindet. Beispielsweise können Sie für jeden Halbkreis einen Kreis mit einem Bogen erstellen. An diesem Punkt ist es oft einfacher, ein Kreis- oder Ellipsen-Element zu verwenden. Diese interaktive Codepen könnte ihnen vieleicht beim Verständnis der Konzepte hinter SVG Bögen zu verstehen: http://codepen.io/lingtalfi/pen/yaLWJG (nur in Chrome und Firefox getestet, funktioniert möglicherweise nicht in Ihrem Browser)

- -

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/de/web/svg/tutorial/svg_fonts/index.html b/files/de/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..57d826cb5e --- /dev/null +++ b/files/de/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,99 @@ +--- +title: SVG-Schriftarten +slug: Web/SVG/Tutorial/SVG_Schriftarten +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

+ +

Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.

+ +

SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt.

+ +

+

Im Internet Explorer wurde eine Implementierung nicht berücksichtigt, in Chrome 38 wurde sie entfernt (auch in Opera 25) und Firefox hat es auf unbestimmte Zeit verschoben, um sich auf WOFF konzentrieren zu können. Andere Tools jedoch wie Adobe SVG Viewer-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.
+

+ +

Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.

+ +

Eine Schriftart definieren

+ +

Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel aus der Spezifikation und an ihm werden die Details erklärt.

+ +
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph>
+  <glyph unicode="@"><!-- Umrisslinie von @ --></glyph>
+  <!-- weitere Zeichen -->
+</font>
+
+ +

Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut id, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut horiz-adv-x legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert 1000 legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.

+ +

Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS @font-face. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut font-family, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels font-family den Zugriff auf die Schriftart. Die Attribute font-weight und font-style erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.

+ +

Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem src-Descriptor bei @font-face in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.

+ +

Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. 

+ +

Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut d hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim path-Tag geschieht.

+ +

Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist unicode. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei xml:lang). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.

+ +

Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in font eingesetzt werden. Beide benötigen die Attribute u1 und u2 und das Attribut k, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.

+ +
<hkern u1="A" u2="V" k="20" />
+
+ +

Auf eine Schriftart zugreifen

+ +

Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut font-family auf sie zugegriffen werden:

+ +
<font>
+  <font-face font-family="Super Sans" />
+  <!-- und so weiter -->
+</font>
+
+<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
+
+ +

Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.

+ +

Option: CSS @font-face benutzen

+ +

@font-face kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:

+ +
<font id="Super_Sans">
+  <!-- und so weiter -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
+ +

Option: Zugriff auf eine externe Schriftart

+ +

Das oben erwähnte font-face-uri-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:

+ +
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

diff --git a/files/de/web/svg/tutorial/svg_schriftarten/index.html b/files/de/web/svg/tutorial/svg_schriftarten/index.html deleted file mode 100644 index 57d826cb5e..0000000000 --- a/files/de/web/svg/tutorial/svg_schriftarten/index.html +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: SVG-Schriftarten -slug: Web/SVG/Tutorial/SVG_Schriftarten -translation_of: Web/SVG/Tutorial/SVG_fonts ---- -

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

- -

Als SVG spezifiziert wurde, war die Unterstützung für Web-Schriftarten in Browsern noch nicht sehr verbreitet. Weil ein Zugriff auf die richtige Schriftart für das korrekte Rendern jedoch so wichtig ist, wurde SVG eine Technologie zur Beschreibung von Schriftarten hinzugefügt, um dies zu ermöglichen. Dabei war eine Kompatibilität mit anderen Formaten wie PostScript oder OTF nicht vorgesehen, sondern vielmehr als ein einfaches Mittel, um Informationen über Zeichen fürs Rendern in SVG einbetten zu können.

- -

SVG-Schriftarten werden gegenwärtig nur durch Safari und Android-Browser unterstützt.

- -

-

Im Internet Explorer wurde eine Implementierung nicht berücksichtigt, in Chrome 38 wurde sie entfernt (auch in Opera 25) und Firefox hat es auf unbestimmte Zeit verschoben, um sich auf WOFF konzentrieren zu können. Andere Tools jedoch wie Adobe SVG Viewer-Plugin, Batik und Teile von Inkscape unterstützen das Einbetten von SVG-Schriftarten.
-

- -

Das grundlegende Tag zur Definition einer SVG-Schriftart ist {{ SVGElement("font") }}.

- -

Eine Schriftart definieren

- -

Es sind einige Angaben nötig, um eine Schriftart in SVG einzubetten. Gezeigt wird das Beispiel aus der Spezifikation und an ihm werden die Details erklärt.

- -
<font id="Font1" horiz-adv-x="1000">
-  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
-      units-per-em="1000" cap-height="600" x-height="400"
-      ascent="700" descent="300"
-      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
-    <font-face-src>
-      <font-face-name name="Super Sans Bold"/>
-    </font-face-src>
-  </font-face>
-  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
-  <glyph unicode="!" horiz-adv-x="300"><!-- Umrisslinie von ! --></glyph>
-  <glyph unicode="@"><!-- Umrisslinie von @ --></glyph>
-  <!-- weitere Zeichen -->
-</font>
-
- -

Am Anfang steht das {{ SVGElement("font") }}-Tag. Es enthält das Attribut id, das einen späteren Zugriff (Referenzierung) mittels URI (siehe unten) ermöglicht. Das Attribut horiz-adv-x legt fest, wie breit ein Zeichen durchschnittlich verglichen zur path-Definition eines einzelnen Zeichens ist. Der Wert 1000 legt einen vernünftigen Wert fest, um damit zu arbeiten. Es gibt weitere Attribute, die helfen, den Kasten näher zu definieren, in dem das Zeichen erstellt werden soll.

- -

Das {{ SVGElement("font-face") }}-Tag ist das SVG-Gegenstück zu CSS @font-face. Darin werden Grundeinstellungen der fertigen Schriftart wie Schriftstärke, Stil usw. definiert. Im obigen Beispiel ist das erste und wichtigste Attribut font-family, sein Wert (im Beispiel "Super Sans") ermöglicht in CSS und in SVG mittels font-family den Zugriff auf die Schriftart. Die Attribute font-weight und font-style erledigen dieselben Aufgaben wie ihre Gegenstücke in CSS. Alle folgenden Attribute sind Rendering-Anweisungen für die Schriftart-Layout-Maschine, zum Beispiel, wie viele Zeichen Gesamthöhen haben, die über der Höhe des Kleinbuchstabens x liegen.

- -

Das Kind-Tag {{ SVGElement("font-face-src") }} entspricht dem src-Descriptor bei @font-face in CSS. Mittels der Kinder-Tags {{ SVGElement("font-face-name") }} und {{ SVGElement("font-face-uri") }} können auf externe Quellen verwiesen werden. Am obigen Beispiel gezeigt: Wenn dem Renderer lokal eine Schriftart namens "Super Sans Bold" verfügbar ist, soll er diese stattdessen benutzen.

- -

Das {{ SVGElement("missing-glyph") }}-Tag wird benutzt, um ein Zeichen zu definieren, das angezeigt wird, falls in der Schriftart kein Zeichen an dieser Stelle definiert wurde und auch kein Ausweichmechanismus zur Verfügung steht. Am Beispiel der Definition des Missing-Glyph (im obigen Beispiel) kann gezeigt werden, wie Zeichen gemacht werden: Einfach irgendeine beliebige SVG-Form oder -Pfad einfügen. 

- -

Auch andere SVG-Tags können hier benutzt werden, zum Beispiel {{ SVGElement("filter") }}, {{ SVGElement("a") }} oder {{ SVGElement("script") }}. Für einfache Zeichen aber kann ein Attribut d hinzugefügt werden. Es definiert den Umriss des Zeichens genau so, wie es beim path-Tag geschieht.

- -

Ein beliebiges Zeichen wird schließlich mit {{ SVGElement("glyph") }} definiert. Das wichtigste Attribut dabei ist unicode. Es legt den Unicode-Codepoint fest, also ob das definierte Zeichen zum Beispiel anstelle des Buchstabens "F" stehen soll. Wird das Attribut {{htmlattrxref("lang")}} eingesetzt, kann die Verwendung auf eine bestimmte Sprache eingeschränkt werden (abhängig von der Angabe bei xml:lang). Und noch mal, es kann beliebiges SVG genutzt werden, um ein Zeichen zu definieren, was den, der die Schriftart nutzt, sehr unstützt.

- -

Die Tags {{ SVGElement("hkern") }} und {{ SVGElement("vkern") }} können in font eingesetzt werden. Beide benötigen die Attribute u1 und u2 und das Attribut k, mit dessen Hilfe der Abstand zwischen u1 und u2 individuell verringert werden kann. Das folgende Beispiel rückt "A" und "V" näher zusammen, als es der Standardabstand eigentlich vorsieht.

- -
<hkern u1="A" u2="V" k="20" />
-
- -

Auf eine Schriftart zugreifen

- -

Wenn die Schriftart fertig ist, kann im {{ SVGElement("text") }}-Tag mit dem Attribut font-family auf sie zugegriffen werden:

- -
<font>
-  <font-face font-family="Super Sans" />
-  <!-- und so weiter -->
-</font>
-
-<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
-
- -

Die Kombination des Attributs mit anderen Tags ermöglicht, die Schriftart an beliebiger Stelle definieren zu können.

- -

Option: CSS @font-face benutzen

- -

@font-face kann benutzt werden, um Zugriff auf externe (und auch nicht-externe) Schriftarten zu bekommen:

- -
<font id="Super_Sans">
-  <!-- und so weiter -->
-</font>
-
-<style type="text/css">
-@font-face {
-  font-family: "Super Sans";
-  src: url(#Super_Sans);
-}
-</style>
-
-<text font-family="Super Sans">Mein Text benutzt Super Sans</text>
- -

Option: Zugriff auf eine externe Schriftart

- -

Das oben erwähnte font-face-uri-Tag ermöglicht den Zugriff auf externe Schriftarten, was eine noch weitere Wiederverwendbarkeit ermöglicht:

- -
<font>
-  <font-face font-family="Super Sans">
-    <font-face-src>
-      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
-    </font-face-src>
-  </font-face>
-</font>
-
- -

{{ PreviousNext("Web/SVG/Tutorial/Filter_effects", "Web/SVG/Tutorial/SVG_Image_Tag") }}

-- cgit v1.2.3-54-g00ecf