SVG clipPath a maska: wybierz ostre krawędzie lub łagodne zanikanie

Użyj SVG <clipPath>, gdy chcesz, aby obraz kończył się na określonym konturze. Użyj SVG <mask>, gdy obraz ma zanikać dzięki częściowej przezroczystości. Maska może też tworzyć ostre odcięcie, ale ścieżka przycinająca prościej wyraża zamiar uzyskania ostrej geometrycznej krawędzi. Specyfikacja CSS Masking definiuje je jako odrębne operacje sterujące widocznością.

Ten wybór ma znaczenie, gdy obraz w kształcie logo ma trafić do innego edytora. Obie metody sterują tym, co widzisz; żadna nie usuwa geometrii odpowiadającej ukrytym pikselom ani nie przekształca obrazu w ścieżki wektorowe. W tym poradniku używam jednej autorskiej sceny rastrowej i jednego konturu, a następnie zmieniam tylko regułę widoczności. Możesz przeprowadzić ten sam test na własnej grafice przed eksportem.

Wybierz na podstawie potrzebnej krawędzi

Widoczna krawędź przycięcia może nadal podlegać zwykłemu wygładzaniu podczas renderowania. Przycięcie nie pozwala jednak uzyskać celowego pasma częściowej widoczności wynikającego z gradientu w skali szarości lub gradientu krycia wewnątrz przyciętego kształtu. Poradnik MDN Clipping and masking ilustruje tę różnicę na niewielkich przykładach SVG.

Porównaj jeden obraz przy trzech regułach widoczności

Na potrzeby tego testu narysowałam niewielki krajobraz, zrasteryzowałam go do pliku PNG o wymiarach 400 × 240 i w każdym panelu umieściłam te same piksele pod tym samym konturem przypominającym liść. Lewy panel przycina obraz do tego konturu. Środkowy używa maski luminancji przechodzącej od bieli do czerni, a prawy — maski alfa przechodzącej od pełnego krycia do przezroczystości. Oba gradienty dobrano tak, aby tworzyły takie samo zanikanie od lewej do prawej. Każdy wynik pokazano na jasnym i ciemnym tle, co ułatwia ocenę zanikającej krawędzi.

Dwie kolumny z maskami wyglądają tu podobnie z określonego powodu: gradient luminancji od bieli do czerni i gradient krycia bieli kodują porównywalne wartości maski. Nie są to zamienne dane wejściowe. Nieprzezroczysta czerń ukrywa obraz przy maskowaniu luminancją, natomiast przy maskowaniu alfa pozostawia go widocznym. W trybie alfa wynik zależy od krycia piksela; jego czarny lub biały kolor nie ma znaczenia. Definicja przetwarzania masek w CSS Masking określa oba sposoby obliczania wartości.

Zbuduj przycięcie i maskę na podstawie jednego konturu

Zapisz poniższy kod jako clip-or-mask.svg, umieść obok niego własny plik photo.png i udostępnij oba pliki z tego samego folderu przez HTTP. Oba obrazy używają jednego układu współrzędnych 400 × 240. Różnią się jedynie użyciem clip-path lub mask.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280">
  <defs>
    <path id="motif"
      d="M30 175 C65 82 140 28 232 41 C290 44 304 75 374 39
         C361 122 310 196 236 219 C139 246 75 217 30 175 Z" />
 
    <clipPath id="hard" clipPathUnits="userSpaceOnUse">
      <use href="#motif" />
    </clipPath>
 
    <linearGradient id="fade" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="white" stop-opacity="1" />
      <stop offset=".45" stop-color="white" stop-opacity="1" />
      <stop offset="1" stop-color="white" stop-opacity="0" />
    </linearGradient>
    <mask id="soft" mask-type="alpha" maskUnits="userSpaceOnUse"
      maskContentUnits="userSpaceOnUse" x="0" y="0" width="400" height="240">
      <use href="#motif" fill="url(#fade)" />
    </mask>
  </defs>
 
  <g transform="translate(20 20)">
    <image href="photo.png" width="400" height="240"
      clip-path="url(#hard)" />
  </g>
  <g transform="translate(440 20)">
    <image href="photo.png" width="400" height="240"
      mask="url(#soft)" />
  </g>
</svg>

Identyfikatory używane w odwołaniach muszą być unikalne w obrębie SVG. Zarówno przycięcie, jak i maska używają userSpaceOnUse, aby współrzędne motywu pasowały do lokalnego obszaru 400 × 240 każdego obrazu. Dokumentacja MDN <clipPath> opisuje przycinanie jako ograniczanie obszaru rysowania bez zmiany własnej geometrii elementu docelowego. Dokumentacja MDN <mask> rozróżnia atrybut maskUnits, który określa położenie obszaru maski, i atrybut maskContentUnits, który określa położenie jej grafiki.

Aby wypróbować luminancję, zduplikuj maskę z innym identyfikatorem, ustaw mask-type="luminance" i zmień punkty gradientu na nieprzezroczystą biel na początku i nieprzezroczystą czerń na końcu. Zaktualizuj odwołanie mask, aby wskazywało nowy identyfikator. Domyślnie SVG <mask> używa luminancji; w tym przykładzie tryb wskazano jawnie, aby przyszła edycja nie zmieniła niepostrzeżenie znaczenia czerni. Zobacz dokumentację MDN mask-type.

Sprawdź wynik przed eksportem

1. Wyrenderuj SVG zarówno na jasnym, jak i ciemnym tle. Zanikanie, które wydaje się niewidoczne na bieli, może być wyraźne na ciemnym tle.
2. Potwierdź, że obraz i motyw używają tych samych współrzędnych. Jeśli zmienisz rozmiar tylko obrazu, kontur może przestać do niego pasować. W przypadku przycięć wielokrotnego użytku stosowanych do elementów o różnych rozmiarach poradnik dotyczący jednostek clipPath wyjaśnia wybór układu współrzędnych.
3. Jeśli miękka krawędź nagle się urywa, sprawdź x, y, width i height maski, a także gradient. Obszar maski może odcinać grafikę poza swoimi granicami; samo poszerzenie gradientu nie naprawi zbyt wąskiego obszaru. MDN podaje domyślne wartości obszaru maski, ale jawnie określone granice łatwiej sprawdzić w przekazywanym pliku.
4. Ponownie otwórz zapisany SVG w aplikacji, która będzie go używać. Poprawne renderowanie w przeglądarce nie dowodzi, że inny importer zachowa przycięcie, maskę, powiązany obraz lub potrzebną Ci możliwość edycji.
5. Sprawdź strukturę pliku. Jeśli nadal zawiera <image>, wciąż zawiera piksele rastrowe, mimo że kontur przycinający jest wektorowy. Poradnik sprawdzania osadzonego obrazu rastrowego pokazuje, jak rozpoznać tę różnicę.

Obraz w tym przykładzie pozostaje plikiem PNG. Przycinanie i maskowanie nie przeprowadzają jego wektoryzacji. Jeśli Twoje zadanie wymaga rzeczywistej geometrii wycięcia lub trwałego przezroczystego otworu, utwórz odpowiednie ścieżki w edytorze i sprawdź eksport. Poradnik rozwiązywania problemów z wypełnionymi otworami pomaga odróżnić rzeczywisty otwór od białej plamy, która tylko wygląda na pustą na białym płótnie.

Gdzie przydaje się PerfectVector

Jeśli potrzebny Ci kontur zachował się tylko w logo w formacie PNG lub JPG, proces przekształcania obrazu w grafikę wektorową w PerfectVector może dać Ci edytowalny SVG do oceny. Sprawdź jego zewnętrzną ścieżkę, małe szczeliny i wszelkie niepożądane kształty tła, zanim skopiujesz kontur do <clipPath> lub <mask>. Nadal samodzielnie wybierasz metodę sterowania widocznością i tworzysz efekt w edytorze SVG. Zachowaj istniejący, poprawny wektorowy plik źródłowy, jeśli jest dostępny.

Nie musisz wektoryzować fotografii tylko po to, aby umieścić ją za maską. Pozostaw piksele fotografii jako obraz, gdy ważne jest zachowanie ich szczegółów. W przypadku jednokolorowej ikony sterowanej przez CSS zamiast obrazu wewnątrz SVG poradnik dotyczący masek SVG w CSS opisuje ten odrębny sposób pracy.

FAQ

Czy SVG clipPath może tworzyć stopniowe zanikanie? Nie. Ścieżka przycinająca określa, które części elementu docelowego są widoczne, z wyjątkiem zwykłego wygładzania na jej granicy. Aby uzyskać celowe zanikanie, użyj maski z pośrednimi wartościami krycia lub luminancji.

Czy czerń ukrywa obraz w każdej masce SVG? Nie. Nieprzezroczysta czerń ukrywa obraz przy maskowaniu luminancją, ale odsłania go przy maskowaniu alfa, ponieważ piksel nadal jest nieprzezroczysty. W pełni przezroczysta grafika ukrywa obraz w obu trybach.

Czy przycinanie lub maskowanie zamienia PNG w grafikę wektorową? Nie. Obie metody zmieniają widoczność podczas renderowania. SVG może nadal zawierać rastrowy <image> i wymagać osobnej wektoryzacji lub edycji ścieżek, aby uzyskać plik zawierający wyłącznie grafikę wektorową.

Źródła

1. W3C — CSS Masking Module Level 1 — Definicje przycinania, maskowania oraz wartości masek alfa i luminancji.
2. MDN — Clipping and masking — Przykłady przycinania z ostrą krawędzią i masek z miękką krawędzią.
3. MDN — <clipPath> — Działanie przycięcia, wybór układu współrzędnych i niezmieniona geometria elementu.
4. MDN — <mask> — Obszar maski, układ współrzędnych zawartości i działanie odwołań.
5. MDN — mask-type — Interpretacja grafiki maski SVG w trybach alfa i luminancji.

Jeśli rastrowe logo wymaga najpierw edytowalnych konturów, utwórz SVG do oceny za pomocą PerfectVector, sprawdź odzyskaną ścieżkę, a następnie zastosuj przycięcie lub maskę i ponownie otwórz wyeksportowany plik w aplikacji docelowej.