offset
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das Attribut offset legt fest, wo ein Farbstopp entlang eines Gradientenvektors liegt oder welcher Offset-Wert in einer Komponentenübertragungsfunktion verwendet wird.
- Bei einem
<stop>-Element gibt es die Position einer Gradientenfarbe entlang eines linearen Gradientenvektors oder als Bruchteil des Abstands zwischen dem Rand einer kleineren, innersten Kreisform und dem Rand einer größeren, äußersten Kreisform an. - Bei Elementen für Komponentenübertragungsfunktionen (
<feFuncR>,<feFuncG>,<feFuncB>und<feFuncA>) legt es eine Konstante fest, die zum Ergebnis dergamma-Übertragungsfunktion addiert wird. Bei anderentype-Werten hat es keine Wirkung.
Beispiel
Offset eines Farbstopps
html
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="linear-gradient">
<stop offset="6%" stop-color="black" />
<stop offset="70%" stop-color="grey" />
</linearGradient>
<radialGradient id="radial-gradient">
<stop offset="0%" stop-color="gold" />
<stop offset="95%" stop-color="grey" />
</radialGradient>
</defs>
<circle cx="5" cy="5" r="4" fill="url('#linear-gradient')" />
<circle cx="15" cy="5" r="4" fill="url('#radial-gradient')" />
</svg>
Offset einer Komponentenübertragungsfunktion
html
<svg viewBox="0 0 200 40" xmlns="http://www.w3.org/2000/svg">
<defs>
<filter id="gamma-filter">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="3" offset="0.2" />
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0.3" />
<feFuncB type="gamma" amplitude="2" exponent="3" offset="0.5" />
</feComponentTransfer>
</filter>
</defs>
<text x="60" y="25" filter="url(#gamma-filter)">GammaFunc</text>
</svg>
Verwendungshinweise
Farbstopp
| Wert |
number | percentage
|
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Komponentenübertragungsfunktionen
Hinweis:
Gilt nur, wenn type auf gamma gesetzt ist. Bei identity, table, discrete und linear wird das Attribut ignoriert.
| Wert |
number
|
|---|---|
| Standardwert | 0 |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # StopElementOffsetAttribute |