CSS właściwość offset-distance

Definicja i zastosowanie

offset-distance Atrybut służy do ustawienia odległości elementu od offset-path Odległość między punktami początkowymi ścieżki określonych przez atrybut.

Przykład

Element <img> umieszczony jest na określonej ścieżce, w pozycji 33% od początku ścieżki.

img {
  offset-path: path('M 50 80 C 150 -20 250 180 350 80');
  offset-distance: 33%;
}

Spróbuj sam

Gramatyka CSS

offset-distance: auto|length|initial|inherit;

Wartość atrybutu

Wartość Opis
0 Element umieszczony na początku ścieżki. Domyślne wartości.
length

Użyj stałych jednostek (np. px, pt, cm itp.) do określenia odległości elementu od początku ścieżki.

Nie dopuszcza się ujemnych wartości. Zobacz:Jednostki CSS.
% Określ procentową odległość względem długości ścieżki.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: 0
Inheredność: Nie
Tworzenie animacji: Obsługiwane. Zobacz:Atrybuty animacji.
Wersja: CSS3
Gramatyka JavaScript: object.style.offsetDistance="200px"

Wsparcie przeglądarki

Liczby w tabeli wskazują na wersję przeglądarki, która po raz pierwszy w pełni obsługuje tę właściwość.

Chrome Edge Firefox Safari Opera
55 79 72 16 42

Strony związane

Tutorial:Ścieżki SVG

Tutorial:Animacja CSS

Odniesienie:CSS właściwość offset

Odniesienie:CSS właściwość offset-anchor

Odniesienie:CSS właściwość offset-path

Odniesienie:CSS właściwość offset-position

Odniesienie:CSS właściwość offset-rotate