intercept
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das Attribut intercept
definiert den Achsenabschnitt der linearen Funktion für Farbkomponentenübertragungen, wenn das type
-Attribut auf linear
gesetzt ist.
Die linear
-Funktion wird definiert als slope * color + intercept
, wobei color
der Farbwert ist, der intercept
einen Basiswert für das Ergebnis liefert und die slope
ein Skalierungsfaktor ist.
Das intercept
-Attribut wird von Kindern des Filterprimitives <feComponentTransfer>
unterstützt und wird mit den folgenden SVG-Komponentenübertragungsfunktionselementen verwendet, wenn type="linear"
eingestellt ist:
Nutzungshinweise
Beispiel
<svg viewBox="0 0 420 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient
id="gradient"
gradientUnits="userSpaceOnUse"
x1="0"
y1="0"
x2="200"
y2="0">
<stop offset="0" stop-color="#ff0000" />
<stop offset="0.5" stop-color="#00ff00" />
<stop offset="1" stop-color="#0000ff" />
</linearGradient>
</defs>
<filter id="componentTransfer1" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" intercept="0" />
<feFuncG type="linear" intercept="0" />
<feFuncB type="linear" intercept="0" />
</feComponentTransfer>
</filter>
<filter id="componentTransfer2" x="0" y="0" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" intercept="0.3" />
<feFuncG type="linear" intercept="0.1" />
<feFuncB type="linear" intercept="0.8" />
</feComponentTransfer>
</filter>
<rect
x="0"
y="0"
width="200"
height="200"
fill="url(#gradient)"
style="filter: url(#componentTransfer1);" />
<rect
x="0"
y="0"
width="200"
height="200"
fill="url(#gradient)"
style="filter: url(#componentTransfer2); transform: translateX(220px);" />
</svg>
Spezifikationen
Specification |
---|
Filter Effects Module Level 1 # element-attrdef-fecomponenttransfer-intercept |
Browser-Kompatibilität
BCD tables only load in the browser