SVG Tutorial

fill
Voreinstellung: black.
Das Attribut fill legt die Füllfarbe für ein Objekt fest. Es erwartet eine Farbangabe als Wertzuweisung. Gültige Farbangaben sind entweder ein spezielles Farbwort, eine hexadezimale Farbangabe mit vorangstellter Raute oder einer dezimale Farbangabe der Form: rgb(0,0,0).
Der Wert none bewirkt, dass das Objekt keine Füllfarbe erhält.

fill-opacity
Voreinstellung: 1.
Mit dem Attribut fill-opacity können Sie die Durchsichtigkeit (Transparenz) einer Füllfarbe bestimmen. Zulässige Werte liegen zwischen 0 und 1. 0 bedeutet völlige Tranzparenz, 1 bedeutet keine Transparenz.
Beachten Sie: Wenn Sie die Transparenz eines Objekts verändern vermischen sich die übereinanderliegenden Farben.

fill-rule
Voreinstellung: nonzero.
Mit der Eigenschaft fill-rule können Sie bestimmen wo sich die zu füllende Fläche (das innere) des Objekts befindet. Diese Festlegung kann von Bedeutung sein, wenn sich der Pfad einer Form überschneidet. Mögliche Werte sind nonzero und evenodd.
Im Beispiel dieses Unterkapitels sind die Unterschiede in der Darstellung bei Verwendung der beiden Werte anschaulich dargestellt.

stroke
Voreinstellung: none.
Mit dem Attribut stroke legen Sie eine Farbe für die Randlinie fest. Zulässige Werte sind gültige Farbangaben oder der Wert none, wenn keine Randlinie dargestellt werden soll.

stroke-dasharray
Voreinstellung: none.
Durch die Verwendung des Attributs stroke-dasharray können Sie eine gestrichelte Linie erzeugen. Als Wertzuweisung erwartet dieses Attribut eine gerade Anzahl durch Kommata getrennte Zahlen. Dabei entspricht jede ungerade Zahl einer Strichlänge und jede gerade Zahl der Länge des Zwischenraums.
Um ein gleichmäßig gestrichelte Linie zu erzeugen, reicht es aus nur 2 Zahlen anzugeben. Die Gesamt-Länge der Linie sollte nach Möglichkeit der Summe aller Zahlenwerte entsprechen.

stroke-dashoffset
Voreinstellung: 0.
Mit dem Attribut stroke-dashoffset haben Sie die Möglichkeit den Beginn der Strichelung einer, mit stroke-dasharray definierten Linie, um eine angegebenen Länge zu verschieben. Das Attribut akzeptiert eine Längenangabe als Wertzuweisung.

stroke-linecap
Voreinstellung: butt.
Durch das Attribut stroke-linecap bestimmen Sie die exakte Form der Linienenden. Dabei sind butt (abschließend rechteckig), round (abgerundet) und square (über das Linienende hinausgezogen, rechteckig) zulässige Werte.

stroke-linejoin
Voreinstellung: miter.
Mit dem Attributs stroke-linejoin können Sie die Darstellung eines Eckpunktes bestimmen, wenn zwei Linien in einem bestimmten Winkel aufeinandertreffen. Der Wert miter bewirkt einen spitzen Winkel, der Wert bevel einen abgeflachte Winkel und durch den Wert round wird der Eckpunkt gerundet dargestellt.

stroke-miterlimit
Voreinstellung: 4.
Das Attribut stroke-miterlimit kann nur verwendet werden, wenn stroke-linejoin die Einstellung miter verwendet (Voreinstellung).
Es erwartet eine Zahl als Wertzuweisung, die der user agent als Faktor versteht. Dieser Faktor wird mit der, im Objekt verwendeten Linienbreite, multipliziert. Das so enstandene Produkt legt die maximale Länge des spitzen Winkels beim aufeinandertreffen der Linien fest.
Wenn die Länge des spitzen Winkels diesen Maximalwert übersteigt, ignoriert der user agent die Anweisung miter und stellt den Winkel abgeflacht (bevel) dar.
Durch Verwendung eines höheren Wertes als 4 für das Attribut stroke-miterlimit erreichen Sie auch in solchen Fällen die Darstellung eines spitzen Winkels.

stroke-opacity
Voreinstellung: 1.
Mit dem Attribut stroke-opacity können Sie die Durchsichtigkeit (Transparenz) einer Randlinie bestimmen. Zulässige Werte liegen zwischen 0 und 1. 0 bedeutet völlige Tranzparenz, 1 bedeutet keine Transparenz.

stroke-width
Voreinstellung: 1.
Mit dem Attribut stroke-width legen Sie die Dicke der Randlinie fest. Das Attribut erwartet eine Längenangabe als Wertzuweisung.

Beispiel Quellcode

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="750" height="480"
  xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PresentationAttributes-FillStroke</title>
<desc>Anwendungsbeispiele</desc>
<defs>
  <style type="text/css">
  <![CDATA[
    text {font-family:Verdana,sans-serif; font-size:13px;
          font-weight:bold;}
    rect {fill:limegreen;}
    circle {fill:yellow; stroke:darkgray; stroke-width:10px;}
    circle.d {fill:none; stroke-width:1px;}
    path {fill:limegreen; stroke:black;}
    line {fill:none; stroke:limegreen; stroke-width:20px;}
    line.d {fill:none; stroke:limegreen; stroke-width:2px;}
    polyline {fill:none; stroke:limegreen; stroke-width:10px;}
  ]]>
  </style>
</defs>

<!-- Durchsichtigkeit -->
<!-- die im Hintergrund liegenden Rechtecke -->
  <rect x="20" y="30" width="120" height="60" />
  <rect x="160" y="30" width="120" height="60" />
  <rect x="300" y="30" width="120" height="60" />
  <rect x="440" y="30" width="120" height="60" />
  <rect x="580" y="30" width="120" height="60" />
<!-- die teiltransparenten Kreise -->
  <circle cx="80" cy="60" r="50" />
  <circle cx="220" cy="60" r="50"
    opacity=".2"/>
  <circle cx="360" cy="60" r="50"
    style="opacity:.8" />
  <circle cx="500" cy="60" r="50"
    fill-opacity=".5" />
  <circle cx="640" cy="60" r="50"
    stroke-opacity=".5" />

<!-- wo ist innen? wo ist aussen? .. einer Form  -->
  <path d="M 20,160 h 120 l -80,100 l 20,-80 l 20,80 z"
    style="fill:none" />
  <path d="M 240,160 h 120 l -80,100 l 20,-80 l 20,80 z" />
  <path d="M 460,160 h 120 l -80,100 l 20,-80 l 20,80 z"
    fill-rule="evenodd" />

<!-- Linienenden -->
  <line x1="30" y1="400" x2="30" y2="300"/>
  <line x1="80" y1="400" x2="80" y2="300"
    stroke-linecap="round" />
  <line x1="130" y1="400" x2="130" y2="300"
    stroke-linecap="square" />

<!-- Linienwinkel -->
  <g transform="rotate(-20,400,350) translate(-30)">
    <polyline points="220,320 350,350 220,380" />
    <polyline points="300,320 430,350 300,380"
      stroke-miterlimit="5" />
    <polyline points="380,320 510,350 380,380"
      stroke-linejoin="bevel" />
    <polyline points="460,320 590,350 460,380"
      stroke-linejoin="round" />
  </g>

<!-- gestrichelte Linien -->
  <line class="d" x1="690" y1="460" x2="590" y2="265"
    stroke-dasharray="8,6" />
  <line class="d" x1="720" y1="460" x2="620" y2="265"
    stroke-dasharray="8,6" stroke-dashoffset="8" />

<!-- Texte, Hilfslinien, Hilfsformen -->
  <text x="22" y="130">normal</text>
  <text x="162" y="130">opacity .2</text>
  <text x="305" y="130">opacity .8</text>
  <text x="445" y="130">fill-opacity .5</text>
  <text x="582" y="130">stroke-opacity .5</text>
  <text x="110" y="230">die Form</text>
  <text x="330" y="230">fill-rule nonzero</text>
  <text x="550" y="230">fill-rule evenodd</text>
  <line x1="10" y1="300" x2="163" y2="300"
    style="stroke:black; stroke-width:1;" />
  <line x1="10" y1="400" x2="163" y2="400"
    style="stroke:black; stroke-width:1;" />
  <text x="20" y="430">stroke-linecap</text>
  <text x="15" y="340">butt</text>
  <text x="65" y="360">round</text>
  <text x="115" y="380">square</text>
  <text x="220" y="320">stroke-linejoin</text>
  <text x="230" y="440">miter (aber Darstellung bevel)</text>
  <text x="306" y="413">miter durch stroke-miterlimit 5</text>
  <text x="382" y="386">bevel</text>
  <text x="458" y="359">round</text>
  <text x="560" y="360">stroke-dasharray 8,6</text>
  <text x="595" y="380">stroke-dashoffset 8</text>
  <line x1="720" y1="454" x2="720" y2="382"
    style="stroke:black; stroke-width:1px;" />
  <circle class="d" cx="690" cy="460" r="6"/>
  <circle class="d" cx="720" cy="460" r="6" />
</svg>