सीएसएस रेफरेंस मैनुअल

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%; }
}

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

मान	वर्णन
none	डिफ़ॉल्ट।एलीमेंट के डिफ़ॉल्ट offset-path गुण का मूलभूत मान。
path()	SVG व्याकरण का इस्तेमाल करके पथ निर्दिष्ट करें।देखें:SVG पथ。
ray()	CSS ray() फ़ंक्शन का इस्तेमाल करके पथ निर्दिष्ट करें।
url()	SVG फ़ाइल के URL का इस्तेमाल करके पथ निर्दिष्ट करें।
<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')"

तालिका में दिए गए नंबर इस गुण को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

च्रोम	एज	फायरफॉक्स	सफारी	ओपेरा
55	79	72	15.4	45