ویژگی offset-path CSS

تعریف و استفاده

offset-path این ویژگی برای ایجاد یک مسیر برای عناصر انیمیشنی استفاده می‌شود.

مثال

یک مسیر برای انیمیشن <div> ایجاد کنید:

div {
  offset-path: path('M20,170 L100,20 L180,100 Z');
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

آزمایش شخصی کنید

نحوی CSS

offset-path: none|path()|ray()|url()|basic-shape|cord-box|initial|inherit;

مقدار ویژگی

مقدار توضیح
none پیش‌فرض. مقدار پیش‌فرض offset-path عنصر.
path() با استفاده از نحوی SVG مسیر را مشخص کنید. به:مسیر SVG.
ray() با استفاده از تابع ray() CSS مسیر را مشخص کنید.
url() با استفاده از URL فایل SVG مسیر را مشخص کنید.
<basic-shape> با استفاده از توابع CSS (مانند inset()، circle()، ellipse() یا polygon()) برای تعریف شکل‌های اولیه مسیر را مشخص کنید.
<coord-box> با استفاده از جعبه مختصات مسیر را مشخص کنید.
initial این ویژگی را به مقدار پیش‌فرض خود تنظیم می‌کند. به: initial.
inherit این ویژگی را از عنصر والد خود ارث می‌برد. به: inherit.

جزئیات فنی

مقدار پیش‌فرض: none
ترک حوری: خیر
انیمیشن‌سازی: پشتیبانی می‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن.
نسخه: CSS3
آموزش نحوی جاوااسکریپت: object.style.offsetPath="path('M20,170 L100,20 L180,100 Z')"

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولیه مرورگرهایی است که این ویژگی را کاملاً پشتیبانی می‌کنند.

Chrome Edge Firefox Safari Opera
55 79 72 15.4 45

صفحات مرتبط

آموزش:مسیر SVG

آموزش:آنیماشن CSS

منابع:ویژگی offset CSS

منابع:ویژگی offset-anchor CSS

منابع:ویژگی offset-distance CSS

منابع:ویژگی offset-position CSS

منابع:ویژگی offset-rotate CSS