SVG/Farben/Füllungen
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.
Der Begriff fill ist mehrdeutig.Die gleichnamige fill-Eigenschaft legt den Endzustand animierter Objekte fest.
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
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.
Wenn Sie die Eigenschaft fill undefiniert lassen, wird das Objekt dann in der Standardfarbe schwarz dargestellt.
fill="none" setzen.Inhaltsverzeichnis
mehrfache Füllungen in SVG 2[Bearbeiten]
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.
<rect fill="url(#Muster1), url(#Muster2), red" ... />
<rect fill="url(#Muster1), url(#Muster2), blue" ... />
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.
circle {
fill-opacity: .5;
}
#eins {
fill: #3983ab;
}
#zwei {
fill: #dfac20;
}
#drei {
fill: #c32e04;
}
opacity eine prozentuale Angabe ist, sind Prozentwerte nicht erlaubt.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:
evenoddDer "äußere" Hintergrund wird gefüllt, die "inneren" Felder bleiben transparentnonzero: (Standardwert) füllt Hintergrund vollständig aus
.normal {
stroke: #3983ab;
stroke-width: 3px;
fill: #dfac20;
fill-rule: evenodd;
}
#zwei {
fill-rule: nonzero;
}
<svg>
<polygon class="normal" points="100,10 40,198 190,78 10,78 160,198"/>
<polygon class="normal" id="zwei" points="300,10 240,198 390,78 210,78 360,198"/>
</svg>
Siehe auch[Bearbeiten]
Weblinks[Bearbeiten]
- W3C: SpecifyingFillPaint
In SVG 1.1 müssen Sie jedes Rechteck dreimal mit jeweils einer einzelnen Füllung erzeugen, um diese Effekte zu erzielen.