خصائص paint-order CSS

التعريف والاستخدام

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: عادي|قيمة واحدة|قيمتان|ثلاثة قيم|القيمة الافتراضية|التوريث;

قيمة الخاصية

القيمة الوصف
عادي القيمة الافتراضية. ترتيب الرسم هو الملء، الرسم، العلامات.
قيمة واحدة

سيبدأ الرسم من القيمة المحددة، ثم يستمر بملء الباقي وفقًا للترتيب الافتراضي.

إذا تم تحديد "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