initial commit

1 files changed, 147 insertions, 0 deletions

diff --git a/files/de/web/svg/tutorial/fills_and_strokes/index.html b/files/de/web/svg/tutorial/fills_and_strokes/index.html
new file mode 100644
index 0000000000..2dd5fb9a7f
--- /dev/null
+++ b/files/de/web/svg/tutorial/fills_and_strokes/index.html
@@ -0,0 +1,147 @@
+---
+title: Fills and Strokes
+slug: Web/SVG/Tutorial/Fills_and_Strokes
+tags:
+  - Anfänger
+  - SVG
+  - 'SVG:Tutorial'
+translation_of: Web/SVG/Tutorial/Fills_and_Strokes
+---
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>
+
+<p>Es gibt mehrere Möglichkeiten die Farben von Formen mit zu verändern, mit Inline CSS (inklusive Attributen am Objekt), eingebettetem CSS oder einer externen CSS Datei. Die meisten <a href="/en-US/docs/Glossary/SVG">SVG</a>s im Netz nutzen Inline CSS, aber jede Möglichkeit hat Vor- und Nachteile.</p>
+
+<h2 id="Fill_and_Stroke_Attributes" name="Fill_and_Stroke_Attributes">Füllungs- und Konturattribute</h2>
+
+<h3 id="Painting" name="Painting">Malen</h3>
+
+<p>Durch das Setzen zweier Attribute beim Element, kann einfache Farbgebung durchgeführt werden: <code>fill</code> und <code>stroke</code>. Dabei setzt <code>fill </code>die Farbe innerhalb des Objektes, während <code>stroke</code> die Farbe der Linien um das Objekt herum bestimmt. Es können die gleichen Namensschemen für CSS Farben genutzt werden, welche auf bei HTML Elementen verwendet werden - also Farbnamen (z.B. <em>red</em>), RGB Werte (z.B. <em>rgb(255, 0, 0)</em>, HEX Codes, rgba und weitere).</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/&gt;
+</pre>
+
+<p>Zusätzlich kann die Durchsichtigkeit von <code>fill</code> und <code>stroke</code> in SVG verändert werden. Diese wird durch die <code>fill-opacity</code> und <code>stroke-opacity</code> Attribute gesetzt.</p>
+
+<div class="note style-wrap">Bemerkung: In Firefox 3+ sind auch rgba Werte möglich, und erzeugen den gleichen Effekt, allerdings wird empfohlen aus Kompatibilitätsgründen fill/stroke-opacity separat zu setzen. Wenn ein rgba Wert und ein fill/stroke-opacity Wert gesetzt wird, so werden beide angewendet.</div>
+
+<h3 id="Stroke" name="Stroke">Kontur</h3>
+
+<p>Zusätzlich zu ihren Farbeigeschaften gibt es noch einige andere Attribute, welche festlegen wie eine Kontur auf einer Linie gezeichnet wird.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/355/=SVG_Stroke_Linecap_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/&gt;
+  &lt;line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/&gt;
+  &lt;line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Die <code>stroke-width</code> Eigenschaft setzt die Breite der Kontur. Konturen werden immer zentriert auf dem Pfad gezeichnet. Im obigen Beispiel ist der Pfad in Pink und die Kontur in Schwarz dargestellt.</p>
+
+<p>Die zweite Eigenschaft von Konturen ist <code>stroke-linecap</code>, welchen ebenfalls oben gezeigt ist. Diese kontrolliert die Form der Konturenden.</p>
+
+<p>Es gibt drei mögliche Werte für <code>stroke-linecap</code>:</p>
+
+<ul>
+ <li><code>butt</code> schließt die Kontur mit einer Geraden Kante, welche senkrecht zur Richtung der Kontur steht und deren Ende schneidet.</li>
+ <li><code>square</code> ist sehr ähnlich, geht allerdings ein wenig über das Ende des Pfades hinaus. Die Überstand ist gleich der halben Konturbreite (<code>stroke-width</code>).</li>
+ <li><code>round</code> erzeugt eine Rundung am Ende der Kontur. Der Radius dieser Runding hängt ebenfalls von <code>stroke-width</code> ab.</li>
+</ul>
+
+<p>Die <code>stroke-linejoin</code> Eigenschaft kann verwendet werden, um zu kontrollieren wie Verbindung zweier Liniensegmente gezeichnet wird.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/356/=SVG_Stroke_Linejoin_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="none" stroke-linejoin="miter"/&gt;
+
+  &lt;polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="none" stroke-linejoin="round"/&gt;
+
+  &lt;polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="none" stroke-linejoin="bevel"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>Im obigen Beispiel werden jeweils zwei Liniensegmente verbunden. Die Verbindung zwischen beiden wird durch das <code>stroke-linejoin</code> Attribut kontrolliert. Es gibt auch hier drei mögliche Werte. <code>miter</code> erweitert die Kontur leicht, um eine "quadratische Ecke" zu generieren, die nur einen Knick hat. <code>round</code> produziert eine abgerundete Ecke. <code>bevel</code> generiert eine glatte Kante am Übergang, wodurch zwei Knicke entstehen.</p>
+
+<p>Abschließend können auch gestrichelte (oder gepunktete) Konturen erstellt werden. Hierzu wird das <code>stroke-dasharray</code> Attribut genutzt.</p>
+
+<p><img alt="" class="internal" src="/@api/deki/files/354/=SVG_Stroke_Dasharray_Example.png" style="float: right;"></p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/&gt;
+  &lt;path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Dem <code>stroke-dasharray</code> Attribut wird eine Liste von Zahlen übergeben, welche durch Kommas getrennt sind.</p>
+
+<div class="note">
+<p>Bemerkung: Anders als bei Pfaden <strong><em>müssen</em></strong> die Zahlen durch ein Komma getrennt werden (Leerzeichen werden ignoriert).</p>
+</div>
+
+<p>Die erste Zahl gibt die Länge der gefüllten Bereiche an, die zweite Nummer die Länge der ungefüllten Bereiche. Im obigen Beispiel werden also 5 Pixel gefüllt, gefolgt von 5 Pixeln Leerbereich und dann dem nächsten 5 Pixel Strich. Es können mehr Zahlen angegeben werden, um ein komplexeres Muster zu erzeugen. Das erste Beispiel hat drei Zahlen. Der Renderer wiederholt die Zahlen hier zweimal, um ein gleichmäßiges Muster zu erzeugen. Hier werden zuerst 5 Pixel gefüllt, 10 Pixel leer, 5 Pixel gefüllt und dann 5 Pixel leer, 10 gefüllt und abschließend 5 Pixel leer gezeichnet. Dann wiederholt sich dieses Muster.</p>
+
+<p>Es gibt weitere Kontur- und Füllungseigenschaften, zum Beispiel <code><a href="/en-US/docs/Web/SVG/Attribute/fill-rule">fill-rule</a></code>, welche bestimmt welche Farbe überlagerte Formen bekommen; <code><a href="/en-US/docs/Web/SVG/Attribute/stroke-miterlimit">stroke-miterlimit</a></code>, welche festlegt ob eine Kontur miter zeichnet; <a href="/en-US/docs/Web/SVG/Attribute/stroke-dashoffset">stroke-dashoffset</a> legt fest wo die Strichelung einer Kontur auf der Linie beginnt.</p>
+
+<h2 id="Using_CSS" name="Using_CSS">CSS verwenden</h2>
+
+<p>Neben der Möglichkeit Attribute beim Objekt selbst zu setzen, kann auch CSS zum Kontrollieren von Füllungen und Konturen verwendet werden. Attribute die sich mit dem Malen und dem Füllen befassen sind meist verfügbar, also können zum Beispiel <code>fill</code>, <code>stroke</code>, <code>stroke-dasharray</code>, etc... auf diese Weise verwendet werden, zusätzlich zu den Verlaufs- und Musterversionen von den unten gezeigten. Attribute wie <code>width</code>, <code>height</code> oder Pfadbefehle können durch CSS nicht verändert werden. Am einfachsten ist es durch Probieren herauszufinden welche Attribute in CSS verfügbar sind.</p>
+
+<div class="note style-wrap">Die <a class="external" href="http://www.w3.org/TR/SVG/propidx.html" title="http://www.w3.org/TR/SVG/propidx.html">SVG Spezifikation</a> unterscheidet strikt zwischen Attributen, die <em>Eigenschaften</em> sind und anderen Attributen. Ersteres kann mit CSS verändert werden, letzteres nicht.</div>
+
+<p>CSS kann mit dem style Attribut direkt beim Element eingefügt werden:</p>
+
+<pre class="brush:xml;"> &lt;rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/&gt;
+
+</pre>
+
+<p>oder es kann in eine spezielle Style-Sektion getan werden, welche eingebunden wird. Anstatt diesen dann in den <code>&lt;head&gt;</code> zu packen, wie in HTML, wird er in eine Sektion getan, welche <code><a href="/en/SVG/Element/defs" title="en/SVG/Element/defs">&lt;defs&gt;</a> </code>heißt.<code> &lt;defs&gt; </code>steht für Definitionen (definitions) und ist dafür da, dass Elemente erstellt werden können, welche nicht direkt im SVG auftauchen, aber von anderen Elementen genutzt werden können.</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;defs&gt;
+    &lt;style type="text/css"&gt;&lt;![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]&gt;&lt;/style&gt;
+  &lt;/defs&gt;
+  &lt;rect x="10" height="180" y="10" width="180" id="MyRect"/&gt;
+&lt;/svg&gt;
+</pre>
+
+<p>Styles in eine Sektion dieser Art zu bewegen kann es einfacher machen die Eigenschaften großer Elementgruppen anzupassen. Es können zusätzlich Dinge wie <strong>hover-Pseudoklassen</strong> genutzt werden, um Überrolleffekte zu erzeugen:</p>
+
+<pre class="brush:css;"> #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+</pre>
+
+<p>Es kann auch ein externes Stylesheet für CSS mit <a class="external" href="http://www.w3.org/TR/xml-stylesheet/" title="http://www.w3.org/TR/xml-stylesheet/">normaler XML-Stylesheet Syntax</a> angegeben werden:</p>
+
+<pre class="brush:xml;">&lt;?xml version="1.0" standalone="no"?&gt;
+&lt;?xml-stylesheet type="text/css" href="style.css"?&gt;
+
+&lt;svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
+  &lt;rect height="10" width="10" id="MyRect"/&gt;
+&lt;/svg&gt;</pre>
+
+<p>dort könnte style.css etwa so aussehen:</p>
+
+<pre class="brush:css;">#MyRect {
+  fill: red;
+  stroke: black;
+}</pre>
+
+<p>{{ PreviousNext("Web/SVG/Tutorial/Paths", "Web/SVG/Tutorial/Gradients") }}</p>