Złożone kształty

Funkcje internetowe: Maski SVG

Przegląd

Aby przycinać elementy do złożonych, nieregularnych kształtów, takich jak pociągnięcia pędzlem lub tekstury organiczne, użyj maskowania CSS (mask-image). Podczas gdy właściwość clip-path doskonale nadaje się do kształtów geometrycznych lub ścieżek wektorowych, mask-image umożliwia używanie obrazów (np. plików PNG z przezroczystością) lub plików SVG do definiowania widocznego obszaru elementu. To podejście jest bardziej ekspresyjne, ponieważ obsługuje półprzezroczystość, co pozwala na uzyskanie miękkich krawędzi i złożonych tekstur, które są trudne lub niemożliwe do osiągnięcia za pomocą clip-path.

Implementacja

Aby zaimplementować złożone kształty za pomocą masek CSS:

Używanie przezroczystości z obrazu

Możesz użyć przezroczystości obrazu jako maski, dzięki czemu nieprzezroczyste części będą widoczne, a przezroczyste – ukryte. Może to być plik PNG, SVG lub inny obraz z przezroczystością albo obraz wygenerowany, np. gradient CSS.

.shaped-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('mask.svg');
  -webkit-mask-size: cover; /* Scale mask to cover element */
  -webkit-mask-repeat: no-repeat; /* Do not tile the mask */

  /* Standard property for modern browsers */
  mask-image: url('mask.svg');
  mask-size: cover;
  mask-repeat: no-repeat;
}

Używanie elementu SVG w kodzie HTML

Możesz też odwołać się do elementu <mask> zdefiniowanego w kodzie SVG w kodzie HTML strony. Użyj maskContentUnits="objectBoundingBox", aby maska automatycznie skalowała się wraz z rozmiarem elementu. Dzięki temu przeglądarka interpretuje wszystkie współrzędne w masce jako ułamki od 0 do 1 (np. 0.5 dla 50%), a nie jako bezwzględne piksele.

Luminancja a maskowanie alfa: domyślnie maski SVG używają luminancji (jasności) do określania przezroczystości, przy czym biel odsłania, czerń ukrywa, a szarość tworzy półprzezroczystość. Jeśli chcesz, aby maska używała kanału alfa (przezroczystości) kształtów SVG, możesz określić mask-type: alpha; w kodzie CSS lub mask-type="alpha" bezpośrednio w elemencie SVG <mask>.

<!-- White areas reveal content, gray creates semi-transparency, black or transparent hides it -->
<svg width="0" height="0">
  <defs>
    <!-- objectBoundingBox scales mask coordinates (0 to 1) with the element's size -->
    <mask id="custom-shape" maskContentUnits="objectBoundingBox">
      <!-- Use white shapes to define fully opaque areas -->
      <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
      <!-- Use gray shapes to define semi-transparent/faded areas -->
      <circle cx="0.5" cy="0.5" r="0.25" fill="gray" />
    </mask>
  </defs>
</svg>

<div class="masked-content">
  <!-- Content to be masked -->
</div>

<style>
.masked-content {
  /* Reference the SVG mask ID */
  -webkit-mask-image: url(#custom-shape);
  mask-image: url(#custom-shape);
}
</style>

Strategie zastępcze

Jeśli przeglądarka nie obsługuje mask-image ani wersji z prefiksem:

  • Element nie zostanie przycięty i będzie wyświetlany jako zwykły prostokąt.
  • Upewnij się, że treść jest nadal czytelna, a układ nie ulega uszkodzeniu bez maski (progresywne ulepszanie).
  • Opcjonalnie możesz użyć wykrywania funkcji, aby udostępnić prostszy kształt zastępczy za pomocą clip-path.
/* Fallback for browsers that do not support masking */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .shaped-element {
    /* Use a simple rounded rectangle as fallback */
    clip-path: inset(5% round 15px);
  }
}