Lekcja 10. Przycinanie i maskowanie

clipPath tnie po kształcie, mask po jasności

Obie techniki robią z pozoru to samo: ukrywają część obrazu. Różnią się mechanizmem, a ta różnica decyduje o wszystkim — od tego, czy krawędź może być miękka, po to, jak szybko strona się renderuje.

Zasada jest krótka. clipPath to nożyczki. mask to sterowanie przezroczystością.

clipPath — cięcie po konturze

html

<defs>
  <clipPath id="ciecie">
    <circle cx="65" cy="70" r="45"/>
  </clipPath>
</defs>

<rect x="15" y="20" width="100" height="100" clip-path="url(#ciecie)"/>

Kształt wewnątrz <clipPath> wyznacza obszar, który zostaje. Wszystko poza nim znika, jakby ktoś obciął kartkę wzdłuż konturu.

Kluczowe: z kształtu w clipPath liczy się wyłącznie geometria. Kolor, obrys, przezroczystość — wszystko to jest ignorowane. Okrąg z fill="red" i opacity="0.2" tnie dokładnie tak samo jak okrąg bez żadnych atrybutów. Ma znaczenie tylko to, gdzie leży jego kontur.

Konsekwencja jest taka, że krawędź cięcia jest zawsze ostra. Można ją wygładzić antyaliasingiem, ale nie da się jej rozmyć ani wyciszyć.

mask — sterowanie widocznością

html

<mask id="maska">
  <circle cx="195" cy="70" r="45" fill="url(#zanik)"/>
</mask>

<rect x="145" y="20" width="100" height="100" mask="url(#maska)"/>

Maska działa inaczej. Przeglądarka rysuje jej zawartość osobno, a potem czyta z niej jasność każdego punktu i używa jej jako miary przezroczystości elementu pod spodem.

Skoro maska jest zwykłym rysunkiem, może zawierać cokolwiek: gradient, wzór, tekst, zdjęcie. I skoro jasność jest wartością ciągłą, przejście może być dowolnie miękkie.

Ten sam kwadrat, ten sam okrąg, jeden suwak na oba. Po lewej krawędź jest ostra jak nożyczkami. Po prawej rozmywa się, bo maskę wypełnia gradient od bieli do czerni.

Skala jasności

Reguła jest prosta i warto ją zapamiętać dosłownie:

• biel — element w pełni widoczny
• czerń — element całkowicie ukryty
• szarość — częściowa przezroczystość, proporcjonalna do jasności

Trzy paski maski i jeden suwak na środkowy. Przy 255 wszystkie trzy byłyby widoczne, przy 0 środkowy zniknąłby jak prawy.

Stąd bierze się najczęstszy błąd początkujących: maska wypełniona kolorem innym niż biel przyciemnia to, co odsłania. Czerwony okrąg w masce nie zrobi czerwonego kształtu — zrobi kształt widoczny mniej więcej w jednej trzeciej, bo tyle wynosi jasność czystej czerwieni.

Jeśli maska ma po prostu odsłaniać, jej zawartość musi być biała. Zawsze.

Trzy pułapki

Obszar maski jest ograniczony. Domyślnie maska obejmuje prostokąt otaczający kształt powiększony o 10% z każdej strony. Zawartość maski wystająca dalej jest ucinana — a objawia się to tym, że rozmycie „kończy się za wcześnie". Można to zmienić atrybutami x, y, width i height na samym <mask>.

Jednostki mają różne wartości domyślne. clipPathUnits domyślnie działa w jednostkach użytkownika, więc współrzędne piszesz normalnie. maskUnits domyślnie działa w ułamkach rozmiaru kształtu, ale maskContentUnits już w jednostkach użytkownika. Brzmi to jak wyliczanka, ale sprowadza się do jednego: jeśli maska zachowuje się dziwnie przy zmianie rozmiaru figury, sprawdź te trzy atrybuty.

Maska kosztuje więcej niż cięcie. Przeglądarka musi wyrenderować ją do osobnego bufora, policzyć jasność i złożyć wynik. Przy jednym elemencie to niezauważalne, przy kilkudziesięciu animowanych — już nie. Jeśli krawędź ma być ostra, użyj clipPath. Maskę zostaw tam, gdzie naprawdę potrzebujesz miękkości.

Wersja z CSS

To samo można wywołać z arkusza stylów:

css

.zdjecie { clip-path: url(#ciecie); }

A jeśli kształt jest prosty, wcale nie potrzebujesz definicji w SVG — CSS ma własne funkcje:

css

.karta { clip-path: inset(10% round 12px); }
.awatar { clip-path: circle(50%); }
.wstega { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }

Działają na dowolnym elemencie HTML, nie tylko na SVG, i można je animować. Do przycięcia zdjęcia w kartę albo zrobienia ukośnej sekcji to zwykle najprostsza droga — bez dotykania grafiki.

Do czego to się przydaje

Cztery zastosowania, które pokrywają większość realnych przypadków:

• Zdjęcie w kształcie — obrazek plus clipPath z konturem logo albo koła.
• Wygaszanie krawędzi — maska z gradientem, żeby długa lista albo wykres rozpływały się przy brzegu zamiast urywać.
• Reflektor — maska z jasną plamą, która podświetla fragment ilustracji. Animowana daje efekt przesuwającego się światła.
• Wycinanie tekstu — tekst w masce, przez który widać gradient albo zdjęcie. Napis wygląda, jakby był oknem na tło.

Podsumowanie

• clipPath tnie po geometrii; kolory i przezroczystość jego zawartości są ignorowane, a krawędź jest zawsze ostra.
• mask czyta jasność swojej zawartości i zamienia ją na przezroczystość elementu.
• Biel odsłania, czerń ukrywa, szarość daje przejście — maska w innym kolorze przyciemnia.
• Domyślny obszar maski to prostokąt kształtu plus 10% zapasu; zawartość poza nim jest ucinana.
• Maska jest droższa obliczeniowo od cięcia — przy ostrej krawędzi zawsze wybieraj clipPath.
• CSS ma własne clip-path z gotowymi kształtami, działające również poza SVG.

W następnej lekcji wchodzą filtry — jedyne miejsce w SVG, gdzie przeglądarka generuje piksele od zera, i najbardziej efektowna część całego formatu.

Do wypróbowania: w presecie clipPath vs mask zamień w masce fill="url(#zanik)" na fill="#808080". Prawy kwadrat przestanie się rozmywać, a zamiast tego cały okrąg stanie się półprzezroczysty — bo maska o jednolitej szarości nie tworzy przejścia, tylko równomiernie wycisza.