Strona główna » Poradniki » Grafika SVG » Przycinanie figur

Przycinanie figur

Wstęp

Przycinanie figur w SVG jest możliwe dzięki obiektowi clipPath. Pozwala to na wybranie obszarów danego obiektu, które mają zostać narysowane. W celu lepszego zrozumienia idei takiego ukrywania warto rozpatrzeć taki rysunek:

Na załączonym obrazku w równej odległości z koła został wycięty niewielki fragment. Czy potrzeba do tego specjalnej metody? Co prawda nie: wystarczy narysować koło dorysować cztery kwadraty zasłaniające koło po rogach i rysunek gotowy. Jednak takie rozwiązanie nie jest najlepsze, ponieważ po zmianie tła (kolor, obiekt w tle) może się okazać, że kolory do siebie nie pasują lub nie widać całego obrazka z tyłu. Problem ten został przedstawiony poniżej:

> inne tło >SzkicNiewłaściwe przycinanie

Korzystanie z przycinania

Definicja

W celu ładnego przycinania jak już wcześniej został wspomniane należy skorzystać z obiektu clipPath, który deklaruje się w części definicji defs. Taki obiekt musi posiadać identyfikator, który pozwoli na odwołanie się do zadeklarowanego elementu. Przykładowa definicja z pierwszego obrazka będzie wyglądać następująco:

  1.   <defs>
  2.     <clipPath id="clip0">
  3.       <rect x="0" y="50" width="200" height="100" />
  4.       <rect x="50" y="0" width="100" height="200" />
  5.     </clipPath>
  6.   </defs>

(1.) W bloku defs: (2.) zadeklaruj obiekt przycinania clipPath o identyfikatorze clip0. (3. - 4.) Przycinanie polega na wyświetleniu jedynie dwóch fragmentów rysunku. (5.) Koniec definicji przycięcia i (6.) bloku definicji.

Zastosowanie

Teraz, aby zastosować przycinanie należy utworzyć obiekt circle, a następnie ustawić wartość argumentu clip-path na url(#clip0) co jest odwołaniem się do zdefiniowanego wcześniej elementu. Poniżej znajduje się prawidłowe zastosowanie:

  1.   <circle cx="100" cy="100" r="90" clip-path="url(#clip0)" />

Rezultat

Wynikiem jest rysunek z początku artykułu. Poniżej został on przedstawiony jeszcze raz razem z pełnym kodem:

  1. <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <clipPath id="clip0">
  4.       <rect x="0" y="50" width="200" height="100" />
  5.       <rect x="50" y="0" width="100" height="200" />
  6.     </clipPath>
  7.   </defs>
  8.   <circle cx="100" cy="100" r="90" clip-path="url(#clip0)" />
  9. </svg>

Kolor obiektów w clipPath

Nie ma potrzeby ustawiania koloru obiektów w clipPath, ponieważ program interpretuje jedynie kształt obiektu, a każdy kolor zostanie zamieniony na kolor przezroczysty.

Inne obiekty

W obiekcie clipPath można używać innych obiektów niż tylko rect. Zgodnie z dokumentacją można wstawić tam każdy inny dowolny obiekt. Należy jednak pamiętać o odpowiednim doborze rozmiarów elementów. Kolejnym przykładem zastosowania obiektu clipPath jest taki o to rysunek:

010011010101100101010100110101101011011001011100010010101001001010101011110101110001011000110010101010101010101110100101011100001101001100101101010101

Cały rysunek opiera się na narysowaniu koła, ale wyświetlenie tylko tych fragmentów, które pokrywają się z tekstem zadeklarowanym w obiekcie przycinania.

  1. <svg width="200" height="200" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  2.   <defs>
  3.     <clipPath id="clip1">
  4.       <text x="0" y="50" font-size="50">01001101010110</text>
  5.       <text x="0" y="100" font-size="50">01010101001101011</text>
  6.       <text x="0" y="150" font-size="50">01011011001011100</text>
  7.       <text x="0" y="200" font-size="50">01001010100100101</text>
  8.       <text x="0" y="250" font-size="50">01010111101011100</text>
  9.       <text x="0" y="300" font-size="50">01011000110010101</text>
  10.       <text x="0" y="350" font-size="50">01010101010111010</text>
  11.       <text x="0" y="400" font-size="50">01010111000011010</text>
  12.       <text x="0" y="450" font-size="50">01100101101010101</text>
  13.     </clipPath>
  14.   </defs>
  15.   <rect x="0" y="0" width="400" height="400" style="fill:lightblue"/>
  16.   <circle cx="200" cy="200" r="200" clip-path="url(#clip1)" />
  17. </svg>

(3. - 13.) Zdefiniuj obiekty przycinające, a następnie (15.) narysuj tło oraz (16.) obiekt circle do którego zostaje zastosowana definicja przycięcia.

Obramowanie i znaczniki

W trakcie przycinania obrazki do określonego obiektu należy pamiętać, że zostanie to zastosowane nie tylko do wypełnienia, ale również obramowania. Z tego względu zaleca się

Podsumowanie

Tego typu przycinanie nie powinno stanowić trudności, a z pewnością zapewni możliwość tworzenia w prostszy sposób bardziej skomplikowanych rysunków. Dla osób, które wolą jednak zostać przy "niewłaściwej" metodzie doradzę, że nie zawsze jest możliwe jej zastosowanie co wynika z ograniczeń dotyczących pozycjonowania warstw obiektów.

Zadania

Zadanie 1

Wykorzystując tylko jeden obiekt clipPath otrzymaj czarne koło razem z białym krzyżykiem pośrodku.

Niektóre przeglądarki mogą wyświetlać bardzo cienkie linie na czarnym tle. Nie trzeba ich rysować.

Zadanie 2

Wskazówka: warto użyć do przycinania np. dużej litery I.

IIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII