Michaels Antwort ist großartig, und ich wünschte, ich hätte sie schon einmal gesehen; aber da ich nicht nur verstehen muss, dass sie verdammt komisch sind, sondern auch auf welche Art und Weise (ich möchte ihre Logik so bearbeiten, dass ich die Mathematik brauche), habe ich eine %code% Implementierung in Javascript (das hauptsächlich aus dem Lesen des Firefox-Quellcodes stammt), der das %code% emuliert, das Webkit / Blink / Gecko verwendet.
Auch hier ist der springende Punkt, nur um zu verstehen, welche Ergebnisse es erzeugt.
Das Snippet wurde aus dieser Antwort übernommen.
___ qstntxt ___
Durch das Lesen der HSL / HSV-Farbtheorie habe ich den Eindruck, dass die Farbtonkomponente ein zyklisches Attribut ist, das sich alle 360 Grad wiederholt und unabhängig von Sättigung und Helligkeit / Wert verändert werden kann. Korrigiere mich, wenn ich falsch liege, aber diese Aussagen folgen logisch der vorherigen Definition:
- Wenn Sie den Farbton um 360 Grad drehen, erhalten Sie die gleiche Farbe
- Wenn Sie den Farbton zweimal um 180 Grad drehen, erhalten Sie die ursprüngliche Farbe
- Die Drehung des Farbtons um 180 Grad gefolgt von -180 Grad ergibt die ursprüngliche Farbe
Allerdings ist nur die Option 1 korrekt. Wenn Sie den Farbton viermal um +90 Grad drehen, ergibt sich eine Farbe, die dem Original nicht einmal annähernd ähnelt.
Außerdem mit -webkit-filter und SVG's
%Vor%
erzeugt nicht das gleiche Ergebnis für dieselbe Rotation. Auf der anderen Seite sind die von SVG-Filtern erzeugten Farben in allen Browsern konsistent.
Gibt es irgendeine "versteckte" Eigenschaft der Farbtonrotation, die die Operation nicht assoziativ macht?
Beispiele für Webkit-Filter und SVGs finden Sie hier: Ссылка
___ tag123graphics ___ Grafiken sind visuelle Präsentationen. Fragen, die dieses Tag verwenden, sollten auch mit dem entsprechenden verwendeten Sprach- und Grafiksubsystem versehen sein. Bei allgemeinen Grafikfragen sollten Sie Computer Graphics Stack Exchange (computergraphics.stackexchange.com) in Erwägung ziehen.
___ tag123svg ___ Scalable Vector Graphics (SVG) ist ein XML-basiertes zweidimensionales Vektorgrafikformat, das auch in HTML verwendet werden kann. Fügen Sie dieses Tag nicht hinzu, nur weil Ihr Projekt SVG verwendet. Fügen Sie stattdessen das Tag hinzu, wenn Ihre Frage entweder SVG betrifft oder eng damit verbunden ist, wie Sie etwas mit SVG erreichen können.
___ tag123colors ___ Verwenden Sie dieses Tag für Fragen zum Darstellen oder Bearbeiten von Farben in einer Programmiersprache.
___ tag123svgfilters ___ SVG-Filter sind eine Gruppe von Bildbearbeitungsprimitiven, die kombiniert werden können, um anspruchsvolle visuelle Effekte zu erzeugen.
___ answer46533498 ___
tl; dr Fehler beim Umwandeln von Farben von Floats (innerhalb des Filters) in Bytes (überall sonst).
Also ist es ein bisschen komplizierter als das, die Spezifikation liefert eine gute Formel für Farbtonrotationsmatrizen, zB die für 180 Grad (außer Alpha und Verschiebungen):
%Vor%
Beachten Sie, wenn Sie das selbst multiplizieren, erhalten Sie (auf vier Dezimalstellen):
%Vor%
, das der Identitätsmatrix oder einer Nulltransformation sehr ähnlich ist.
Das wäre perfekt, außer dass der Browser zwischen jedem Filter wieder in RGB konvertiert. Schauen Sie was passiert, wenn wir rot leuchten:
%Vor%
Wir erhalten eine Farbe, die in RGB mit Werten von 0 bis 255 nicht dargestellt werden kann. Daher wird sie während der RGB-Konvertierung auf %code% gebunden und gerundet, und wenn sie erneut gedreht wird, erhalten wir ein dunkles desaturiertes Rot, %code% anstelle des hellen reinen Rot, mit dem wir angefangen haben.
___ tag123hsl ___ HSV ist ein zylindrisches Farbmodell, das Farben nach Farbton (0 ° -360 °), Sättigung (Farbintensität) und Helligkeit (von Schwarz über die Farbe zu Weiß) bestimmt.
___ antwort19325417 ___
Sowohl in CSS- als auch in SVG-Filtern gibt es keine Konvertierung in HSV oder HSL - die shorthands von hueRotation verwenden eine lineare Matrixapproximation im RGB-Raum, um die Farbtonrotation durchzuführen. Dies spart Sättigung oder Helligkeit für kleine Rotationen und stark gesättigte Farben nicht gut - wie Sie sehen.
Eine echte Farbtonrotation würde zuerst die RGB-Eingangsfarbe in HSL umwandeln, das H anpassen und dann zurück in RGB konvertieren. Filter tun das nicht. Und diese Umwandlung kann nicht genau mit einer linearen Matrix approximiert werden, so dass, während der Farbton (hauptsächlich) genau verändert wird, die Sättigung und Helligkeit überall verteilt sind. Diese Effekte sind nichtlinear, sodass das Hinzufügen kleinerer Ops zu anderen Farben führt als die Ausführung einer großen Operation.
(Der Unterschied zwischen huerotation in SVG- und CSS-Filtern könnte auf die Verwendung anderer Farbräume zurückzuführen sein (sRGB vs. linearRGB) - diese sollten gleich sein.)
Update: Ich bin interessiert genug, um einen manuellen Vergleich zu machen. Wie Sie sehen können, machen Filter eine schreckliche Arbeit, indem sie reine Farben im Bereich von 0 bis 180 Grad rotieren lassen. Dieses Bild vergleicht eine manuelle Farbtonrotation, indem Sie hsl Farben manuell (äußerer Ring) gegen eine Filterfarbtonrotation auf der Grundfarbe (innerer Ring)
einstecken
Aber sie machen einen besseren Job bei weniger reinen Farben wie HSL (0,50%, 75%), wie Sie sehen können.
codepen Link, falls Sie spielen möchten: Ссылка
___