CSS paint-order کا کیمپٹنٹ
- پریو پرن پینج بریک انسائڈ
- پریو پرن پرسپیکٹیو
تعریف و استفاده
paint-order این ویژگی ترتیب نقاشی عنصر SVG یا متنی را مشخص می‌کند.
توجه:برای عناصر متنی، تنها می‌توان ترتیب خط کشیدن (stroke) و پر کردن (fill) را تغییر داد، زیرا نشانه‌ها (markers) کاربرد ندارد.
مثال
مثال 1
ترتیب نقاشی SVG <circle> عناصر تغییر دهید:
circle {
paint-order: stroke fill;
}
مثال 2
ترتیب نقاشی SVG <text> عناصر با پر کردن رنگی آفتابی تغییر دهید:
text {
paint-order: stroke fill;
}
نوع CSS
paint-order: normal|یک مقدار|دو مقدار|سه مقدار|initial|inherit;
مقدار ویژگی
| مقدار | توضیح |
|---|---|
| معمولی | مقدار پیش‌فرض. ترتیب نقاشی پر کردن، خط کشیدن و نشانه‌ها خواهد بود. |
| یک مقدار |
نقاشی از مقادیر داده شده شروع خواهد شد و سپس بر اساس ترتیب پیش‌فرض به نقاشی باقی‌مانده ادامه خواهد داد. اگر تنها "stroke" مشخص شود، فعالیت بعدی نقاشی پر کردن (fill) و سپس نقاشی نشانه‌ها (markers) خواهد بود. |
| دو مقدار |
نقاشی از مقادیر داده شده شروع خواهد شد و سپس بر اساس ترتیب پیش‌فرض به نقاشی باقی‌مانده ادامه خواهد داد. اگر "stroke markers" مشخص شود، فعالیت بعدی نقاشی پر کردن (fill) خواهد بود. |
| سه مقدار | نقاشی بر اساس مقادیر داده شده انجام خواهد شد. |
| مقدار اولیه | این ویژگی را به مقدار پیش‌فرض خود تنظیم کنید. به: مقدار اولیه. |
| وراثت | این ویژگی از عنصر والد خود ارث می‌برد. به: وراثت. |
جزئیات فنی
| مقدار پیش‌فرض: | معمولی |
|---|---|
| وراثت: | بله |
| انیمیشن: | پشتیبانی نمی‌شود. لطفاً به:ویژگی‌های مرتبط با انیمیشن. |
| نسخه: | CSS3 |
| نوع جاوااسکریپت: | object.style.paintOrder="stroke fill" |
پشتیبانی مرورگر
اعداد در جدول نشان‌دهنده نسخه اولین مرورگر هستند که این ویژگی را کامل پشتیبانی می‌کند.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 35.0 | 17.0 | 60.0 | 8.0 | 22.0 |
صفحات مرتبط
تعلیم:SVG تعلیم
تعلیم:HTML SVG گرافکس
- پریو پرن پینج بریک انسائڈ
- پریو پرن پرسپیکٹیو
