CSS paint-order లక్షణం

定义和用法

paint-order 属性指定 SVG 元素或文本的绘制顺序。

మెరుగుదల:టెక్స్ట్ ఎలమెంట్ కోసం, మార్కర్స్ అప్లికేబుల్ కాదు అయినప్పుడు, మాత్రమే స్ట్రోక్ (స్ట్రోక్) మరియు పూర్తి చేయడం (పూర్తి చేయడం) యొక్క క్రమాన్ని మార్చుకోవచ్చు.

ఉదాహరణ

ఉదాహరణ 1

SVG <circle> ఎలమెంట్ యొక్క చిత్రీకరణ క్రమాన్ని మార్చుకోండి:

circle {
  paint-order: స్ట్రోక్ పూర్తి చేయడం;
}

స్వయంగా ప్రయోగించండి

ఉదాహరణ 2

రెండురంగ పూర్తి చేయడం కలిగిన SVG <text> ఎలమెంట్ యొక్క చిత్రీకరణ క్రమాన్ని మార్చుకోండి:

text {
  paint-order: స్ట్రోక్ పూర్తి చేయడం;
}

స్వయంగా ప్రయోగించండి

CSS సంకేతాలు

paint-order: సాధారణ|ఒక విలువ|రెండు విలువలు|మూడు విలువలు|అప్రమేయ|పారంపర్యం కలిగిన విధం;

లక్షణ విలువ

విలువ వివరణ
సాధారణ అప్రమేయ విలువ. చిత్రీకరణ క్రమం: పూర్తి చేయడం, స్ట్రోక్, మార్కర్స్.
ఒక విలువ

చిత్రీకరణ ఇచ్చిన విలువకు పాటు ప్రారంభం చేయబడుతుంది, ఆపై అప్రమేయ క్రమంలో మిగిలిన భాగాన్ని చిత్రీకరణ చేయబడుతుంది。

మాత్రమే "స్ట్రోక్" ఇచ్చినట్లయితే, తదుపరి చిత్రీకరణ పూర్తి చేయబడుతుంది (పూర్తి చేయడం), ఆపై మార్కర్స్ చేయబడుతుంది.
రెండు విలువలు

చిత్రీకరణ ఇచ్చిన విలువకు పాటు ప్రారంభం చేయబడుతుంది, ఆపై అప్రమేయ క్రమంలో మిగిలిన భాగాన్ని చిత్రీకరణ చేయబడుతుంది。

ఇచ్చిన "స్ట్రోక్ మార్కర్స్" ను పేర్కొనితే, తదుపరి చిత్రీకరణ పూర్తి చేయబడుతుంది (పూర్తి చేయడం).
మూడు విలువలు చిత్రీకరణ ఇచ్చిన విలువకు పాటు జరుగుతుంది。
అప్రమేయ విలువ ఈ లక్షణాన్ని అప్రమేయ విలువకు సెట్ చేయండి. దయచేసి ఈ కి మీద చూడండి: అప్రమేయ విలువ.
పారంపర్యం కలిగిన విధం ఈ లక్షణాన్ని తన తల్లి ఎలమెంట్ నుండి పారంపర్యం కలిగిన విధం ఉంచుతుంది. దయచేసి ఈ కి మీద చూడండి: పారంపర్యం కలిగిన విధం.

సాంకేతిక వివరాలు

అప్రమేయ విలువ: సాధారణ
పారంపర్యం కలిగిన విధం: అవును
అనిమేషన్ తయారీ: మద్దతు లేదు. దయచేసి ఈ కి మీద చూడండి:అనిమేషన్ సంబంధిత లక్షణాలు.
సంస్కరణ: CSS3
జావాస్క్రిప్ట్ సంకేతాలు: object.style.paintOrder="stroke fill"

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ లక్షణాన్ని పూర్తిగా మద్దతు ఇస్తున్న బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

క్రోమ్ ఎడ్జ్ ఫైర్ఫాక్స్ సఫారీ ఆపెరా
35.0 17.0 60.0 8.0 22.0

క్రియాశేషి పేజీలు

教程：SVG 教程

教程：HTML SVG 图形