2012-12-26 15 views
5

Funkcja liniowa SVG feComponentTransfer nie działa tak, jak tego oczekuję. Nachylenie -1 i punkt przecięcia 1 zastosowane do obrazu w skali szarości powinny odwrócić obraz: czarny -> biały, biały -> czarny, 25% szary -> 75% szary, 50% szary bez zmian i tak dalej.svg feComponentTransfer funkcja liniowa

Moje oczekiwanie jest oparte na http://www.w3.org/TR/filter-effects/#feComponentTransferElement, które mówi "C" = nachylenie * C + punkt przecięcia ", gdzie" C jest początkowym składnikiem (np. "FeFuncR"), C 'jest remapowanym komponentem, oba w zamkniętym odstępie [0,1]. ".

Następujący filtr

<filter id="linear"> 
    <feComponentTransfer> 
    <feFuncR type="linear" slope="-1" intercept="1" /> 
    <feFuncG type="linear" slope="-1" intercept="1" /> 
    <feFuncB type="linear" slope="-1" intercept="1" /> 
    </feComponentTransfer> 
</filter> 

odwzorowuje bieli do czerni i bieli do czerni, a wartości pośrednich są wyłączone, np 50% szarych map do 90% szarości i 75% szarych map do 98% szarości. Zobacz prosty przykład na stronie http://jsfiddle.net/Rpjs2/. Mam takie same wyniki w Firefoksie i Safari.

To jest moja pierwsza próba filtrów SVG, więc podejrzewam, że nie rozumiem specyfikacji. Czy ktoś może mnie poprawić?

+0

Sprawdź [ten przykład] (http://src.chromium.org/chrome/branches/WebKit/195/LayoutTests/svg/custom/feComponentTransfer-Linear.svg) z kodu źródłowego WebKit. Użycie podobnego filtru powoduje "odwrócenie" gradientu (spójrz na definicje filtrów, ponieważ opisujący je tekst jest niepoprawny), ale nie perfekcyjnie. Wydaje się, że przesunięto nieco w lewo. – seliopou

+0

Zostało przesunięte w lewo całkiem sporo, nigdzie w pobliżu, co można uzyskać, stosując -1 * c + 1. Moją pierwszą myślą jest to, że jest to błąd, ponieważ nie pasuje do specyfikacji w3, ale dziwne jest, że Safari i Firefox zaimplementowały go w tym samym (najwyraźniej niewłaściwym) sposobie. Zgłaszałem raporty o błędach do Mozilli i WebKit i zgłaszam je, jeśli uznają to za błąd. – BobW

+0

Zainspirowałeś mnie do doc feComponentTransfer w dokumentach webplatform. Daj mi znać, co myślisz: http://docs.webplatform.org/wiki/svg/elements/feComponentTransfer –

Odpowiedz

5

Filtry ogólnie działają w przestrzeni kolorów linearRGB. Ten przypadek użycia wymaga sRGB, więc wystarczy ustawić color-interpolation-filters = "sRGB" na elemencie filtrującym

+0

Dzięki, właśnie spróbowałem tego. Działa w przeglądarkach Firefox i Chrome, ale Safari ignoruje to ustawienie. (Irytujące, że kompilacja wydania Safari używa starszych wersji WebKit niż Chrome.) W Safari jest wiele błędów SVG, które zostały naprawione kilka miesięcy temu w WebKit i nie pojawiają się w Chrome.) – BobW

0

Możesz głównie poprawić za pomocą innego transferu komponentu po oryginale.

<feComponentTransfer> 
    <feFuncR type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    <feFuncG type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    <feFuncB type="gamma" offset="0" amplitude="1" exponent="4.84"/> 
    </feComponentTransfer> 

Spowoduje to lepsze rozjaśnienie zakresu kolorów za pomocą "podwójnej" korekcji gamma wynoszącej 2,2^2 = 4,84.

Powiązane problemy