SVG/Element/feComponentTransfer
Aus SELFHTML-Wiki
Das feComponentTransfer-Element verändert die Farbe jedes Pixels. Dabei werden die Farben in jedem Kanal (R, G, B, und A) durch das Ergebnis der Kindelemente feFuncA, feFuncB, feFuncG, feFuncR gerändert und ausgegeben.
- Syntax
- Start-Tag: notwendig
- End-Tag: notwendig
- Elternelemente
- Darf vorkommen in:
filter - erlaubte Inhalte
- feFuncA, feFuncB, feFuncG, feFuncR
| Name | Inhalt | Standardwert | Bedeutung |
|---|---|---|---|
| in | CDATA |
Attribut: Pflichtattribut
Attribut: optionales Attribut
Beispiel
<defs>
<filter id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="Table" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"/>
<feFuncG type="table" tableValues="1 1 0 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter id="Gamma" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
</feComponentTransfer>
</filter>
</defs>
Siehe auch
- SVG/Tutorials/Filter
- SVG/Tutorials/Text/Filter-Effekte Sprayeffekte
Weblinks
- W3C(Spezifikation): feComponentTransferElement
- wikibooks.org: Urfilter feComponentTransfer
Grundformen
- Struktur und Gruppierungen
- Metadaten
- Text
- weitere Elemente
- Animationen
- Beschneidungen und Masken
- Filter
- filter
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feDistantLight
- feDropShadow
- feFlood
- feFuncA
- feFuncB
- feFuncG
- feFuncR
- feGaussianblur
- feImage
- feMerge
- feMergeNode
- feMorphology
- feOffset
- fePointLight
- feSpecularLighting
- feSpotLight
- feTile
- feTurbulence
- Muster und Verläufe
Live-Beispiel
Beispiel
ansehen …
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse"
x1="100" y1="0" x2="600" y2="0">
<stop offset="0" stop-color="#ff0000" />
<stop offset=".33" stop-color="#00ff00" />
<stop offset=".67" stop-color="#0000ff" />
<stop offset="1" stop-color="#000000" />
</linearGradient>
<filter id="Identity" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="identity"/>
<feFuncG type="identity"/>
<feFuncB type="identity"/>
<feFuncA type="identity"/>
</feComponentTransfer>
</filter>
<filter id="Table" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="table" tableValues="0 0 1 1"/>
<feFuncG type="table" tableValues="1 1 0 0"/>
<feFuncB type="table" tableValues="0 1 1 0"/>
</feComponentTransfer>
</filter>
<filter id="Linear" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="linear" slope=".5" intercept=".25"/>
<feFuncG type="linear" slope=".5" intercept="0"/>
<feFuncB type="linear" slope=".5" intercept=".5"/>
</feComponentTransfer>
</filter>
<filter id="Gamma" filterUnits="objectBoundingBox"
x="0%" y="0%" width="100%" height="100%">
<feComponentTransfer>
<feFuncR type="gamma" amplitude="2" exponent="5" offset="0"/>
<feFuncG type="gamma" amplitude="2" exponent="3" offset="0"/>
<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
</feComponentTransfer>
</filter>
</defs>
Diese Beispiel aus der Spezifikation zeigt die verschiedenen Transfertypen.
