color-interpolation-filters
Voreinstellung: linearRGB.
Alle primitiven Filter verwenden als Input-Bild ein
RGBA Bild. Dieser Farbraum wird durch das Attribut
color-interpolation-filters
bzw. dessen voreingestelltem
Wert linearRGB festgelegt.
Für andere Farboperationen, wie z.B. Farbverläufe, gilt der
Farbraum der innerhalb der SVG Grafik durch das Attribut
color-interpolation
definiert ist:
das ist in der Voreinstellung sRGB.
Wenn Sie also auf ein Element,
dessen Füllung durch einen anderen Farbraum definiert ist
(das z.B. mit einem Farbverlauf gefüllt ist),
einen der farbverändernden Filter feColorMatrix oder
feComponentTransfer anwenden wollen,
sollten Sie die Werte dieser beiden
Attribute anpassen. Nur so ist gewährleistet, dass der
gewünschen Effekt korrekt dargestellt wird.
Beispiel Quellcode
Grafische Darstellung:
SVG-Darstellung (nur SVG-fähige Browser!)
Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="760px" height="200px"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>PresentationAttributs-FilterPrimitives</title>
<desc>
Attribute für primitive Filter 1
</desc>
<defs>
<style type="text/css">
<![CDATA[
text {font-family:Verdana,sans-serif; font-size:48px;
font-weight:bold; }
]]>
</style>
<!-- der Verlauf -->
<linearGradient id="v1"
x1="0" y1="0" x2="1" y2="0">
<stop offset=".2" stop-color="limegreen" />
<stop offset="1" stop-color="black" />
</linearGradient>
<!-- Filter: linearRGB -->
<filter id="f1">
<feColorMatrix in="SourceGraphic"
type="hueRotate" values="90" />
</filter>
<!-- Filter: sRGB -->
<filter id="f2" color-interpolation-filters="sRGB">
<feColorMatrix in="SourceGraphic"
type="hueRotate" values="90"
color-interpolation-filters="sRGB" />
</filter>
</defs>
<text x="30" y="70" fill="url(#v1)"
filter="url(#f1)">
color-interpolation-filters
<tspan x="330" dy="20"
style="font-size:16px; font-stretch:ultra-expanded;">
linearRGB
</tspan>
</text>
<text x="30" y="150" fill="url(#v1)"
filter="url(#f2)">
color-interpolation-filters
<tspan x="330" dy="20"
style="font-size:16px; font-stretch:ultra-expanded;">
sRGB
</tspan>
</text>
</svg>
Die obige Beispielgrafik enthält 2 Textelemente, die mit einem
Verlauf gefüllt sind. Auf diese beiden text-Elemente
wird jeweils eine Farbveränderung durch die Filter f1
und f2 angewandt.
Beide Filter enthalten den primitiven Filter
feColorMatrix der eine Farbveränderung bewirkt.
Im Filter f1 werden die unterschiedlichen Farbräume von Verlauf
und Filteroperation nicht angepasst.
Im Filter f2 wird durch Verwendung des Attributs
color-interpolation-filters der Farbraum
sRGB
als gültiger Farbraum definiert.
Das Attribut color-interpolation-filters kann
übigens auch im filter-Element verwendet werden.
|