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:
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.) 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.
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:
Wynikiem jest rysunek z początku artykułu. Poniżej został on przedstawiony jeszcze raz razem z pełnym kodem:
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.
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:
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.
(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.
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ę
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.
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ć.
Wskazówka: warto użyć do przycinania np. dużej litery I.
