SVG/Farben/Füllungen

Aus SELFHTML-Wiki
< SVG‎ | Farben
Wechseln zu: Navigation, Suche

Die Eigenschaft fill legt die Füllfarbe für ein Objekt fest. Sie erwartet eine Farbangabe oder die Referenz auf ein Muster oder einen Verlauf als Wertzuweisung.

  • SVG 1.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Der Titel dieses Artikels ist mehrdeutig. Die gleichnamige fill-Eigenschaft legt den Endzustand animierter Objekte fest.

  • SVG/SMIL: fill-Attribut
  • JavaScript Web Animations API fill-Eigenschaft



Erlaubt sind dabei folgende Werte:

  • eine Farbangabe
  • die Angabe none, Hintergrund wird transparent dargestellt
  • die Angabe currentColor, weist den Browser an, einen festgelegten Standardfarbwert zu verwenden
  • eine url(#id) um ein Muster oder Verlauf zu referenzieren
Beispiel ansehen …
rect {
  stroke: #dfac20;
  }
#eins {
  fill: #3983ab;
  } 
#zwei {
  } 
#drei {
  fill: none;
  }

Das linke, obere Rechteck hat eine Wertzuweisung mit fill; das rechte obere keine und wird daher schwarz gefüllt. Das mittlere Rechteck hat mit fill:none; einen transparenten Hintergrund.

Beachten Sie:

Wenn Sie die Eigenschaft fill undefiniert lassen, wird das Objekt dann in der Standardfarbe schwarz dargestellt.

Wenn Sie das Innere des Objekts nicht darstellen wollen, müssen Sie fill="none" setzen.

mehrfache Füllungen in SVG 2[Bearbeiten]

Hinweis

Neu in SVG2. Diese Eigenschaften werden von Browsern noch nicht unterstützt!

In SVG2 ist es möglich mehrere Füllungen (multiple fills) zu definieren, die nacheinander ausgeführt werden. So können Sie ein Objekt mit einer Hintergrundfarbe füllen und ein oder mehrere Muster oder Schraffuren darüber legen.

  • SVG 2
  • Leer
  • Leer
  • Leer
  • Leer
  • Leer
Beispiel: Muster mit verschiedenen Hintergrundfarben durch mehrfache Füllungen
<rect fill="url(#Muster1), url(#Muster2), red" ... />
<rect fill="url(#Muster1), url(#Muster2), blue" ... />
Die Rechtecke haben jeweils drei Füllungen: eine Hintergrundfarbe und zwei darüberliegende Muster.
In SVG 1.1 müssen Sie jedes Rechteck dreimal mit jeweils einer einzelnen Füllung erzeugen, um diese Effekte zu erzielen.

fill-opacity[Bearbeiten]

Mit der Eigenschaft fill-opacity (engl. für Deckkraft) lässt sich über den Alphakanal der Grad der Transparenz eines Elementes steuern.

Folgende Angabe ist nötig:

  • Zahlenangabe: (Standardwert = 1), Zahlenwert zwischen 0 und 1. Ein Wert von eins bedeutet dabei eine 100 %ige Deckkraft, also keinerlei Transparenz, ein Wert von null entsprechend keinerlei Deckfähigkeit, also vollständige Transparenz.
Beispiel ansehen …
circle {
  fill-opacity: .5;	
  }
#eins {
  fill: #3983ab;
  } 
#zwei {
  fill: #dfac20;
  } 
#drei {
  fill: #c32e04;
  }
Beachten Sie: Obwohl der Wert für opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.
Beachten Sie: Wenn Sie die Transparenz eines Objekts verändern, vermischen sich die übereinanderliegenden Farben.

fill-rule[Bearbeiten]

Mit der Eigenschaft fill-rule können Sie Füllmethoden festlegen, falls sich einzelne Linien überschneiden. Dabei werden Polygonzüge so behandelt, als wären der erste und der letzte Punkt der Linie miteinander verbunden.

Folgende Angaben sind möglich:

  • evenodd Der "äußere" Hintergrund wird gefüllt, die "inneren" Felder bleiben transparent
  • nonzero: (Standardwert) füllt Hintergrund vollständig aus
Beispiel ansehen …
.eins {
  stroke: #3983ab;
  stroke-width: 3px;
  fill: #dfac20;
  fill-rule: nonzero;  
  }
.zwei {
  stroke: #3983ab;
  stroke-width: 3px;
  fill: #dfac20;
  fill-rule: evenodd;
  }
<svg>
  <polygon class="eins" points="100,10 40,198 190,78 10,78 160,198"/>
  <polygon class="zwei" points="300,10 240,198 390,78 210,78 360,198"/>
</svg>

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]