Opis

clip-path pozwala przyciąć element do podstawowego kształtu lub źródła SVG. Tworzy region obcinania, który określa, która część elementu powinna być pokazana. Części wewnątrz regionu są pokazane, a te na zewnątrz są ukryte.

Przykład
Kod:
Wartości

clip-path: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

WartośćOpis
none Domyślne. Nie wykonuje się obcinania
clip-source
url(butelka.svg) | 		Definiuje adres URL elementu SVG
(WYMAGA DOPRACOWANIA)
basic-shape
circle(30%) | circle(50%) 		Przycina element do podstawowego kształtu: circle, ellipse, polygon lub inset, którego rozmiar i pozycja są określone przez pole geometrii. Jeśli nie zostanie określone pole geometrii, jako pole odniesienia zostanie użyte border-box.
margin-box Pole geometri. Używa pola marginesu jako pola odniesienia
border-box Pole geometri. Używa ramki obramowania jako pola odniesienia
padding-box Pole geometri. Używa pola wypełnienia jako pola odniesienia
content-box Pole geometri. Używa pola zawartości jako pola odniesienia
fill-box Pole geometri. Używa obwiedni obiektu jako pola odniesienia
stroke-box Pole geometri. Używa obwiedni obrysu jako pola odniesienia
view-box Pole geometri. Używa rzutni SVG jako pola odniesienia
initial Ustawia tę właściwość na wartość domyślną.
inherit Dziedziczy tę właściwość po elemencie nadrzędnym.
Przykłady: polygon(50% 0%, 0% 100%, 100% 100%)  |   circle(50% at left center)  |   circle(50% at left center) content-box  |     |  
Info: Domyślna wartość: none
Dziedziczenie:
Animowalność: dla basic-shape
JavaScript: object.style.clipPath