1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
---
title: paint-order
slug: Web/CSS/paint-order
translation_of: Web/CSS/paint-order
---
<div>{{CSSRef}}{{seecompattable}}</div>
<p><a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>paint-order</code></strong> 属性可以让你控制文本区域和图形绘制的填充和绘制（和markers）的顺序</p>
<h2 id="语法">语法</h2>
<pre class="brush: css no-line-numbers">/*默认 */
paint-order: normal;
/* 单一属性 */
paint-order: stroke; /* 先描边, 然后填充,markers*/
paint-order: markers; /* 先绘制markers, 然后填充，描边 */
/* 多属性 */
paint-order: stroke fill; /* 先描边，然后填充，然后markers */
paint-order: markers stroke fill; /* 先 markers, 然后 stroke, 然后 fill */
</pre>
<p>如果没有指定值，默认顺序将是 <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p>
<p>当只指定一个值的时候，这个值将会被首先渲染，然后剩下的两个值将会以默认顺序渲染，当只指定两个值的时候，这两个值会以指定的顺序渲染，接着渲染剩下的未指定的那个。</p>
<div class="note">
<p>注意：在这个属性的值当中，markers 只有当在绘制SVG图形时引用了 <code>marker-*</code>属性（例如 <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>）和 <code><a href="/en-US/docs/Web/SVG/Element/marker"><marker></a></code> 元素才能进行控制。他们不适用于HTML文本，所以，这样的话，你只能决定 <code>stroke</code> 和 <code>fill </code>的顺序。</p>
</div>
<h3 id="属性值">属性值</h3>
<dl>
<dt><code>normal</code></dt>
<dd>用正常的顺序渲染不同的元素</dd>
<dt><code>stroke</code>,<br>
<code>fill</code>,</dt>
<dt><code>markers</code></dt>
<dd>指定一部分或者全部这些属性的渲染顺序</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="使用示例">使用示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Stroke in front</p>
<p class="stroke-behind">Stroke behind</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p {
font-family: sans-serif;
font-size: 5rem;
font-weight: bold;
margin: 0;
-webkit-text-stroke: 5px red;
}
.stroke-behind {
paint-order: stroke fill;
}</pre>
<h3 id="效果">效果</h3>
<p>{{EmbedLiveSample('Examples', '100%', 165)}}</p>
<h2 id="说明">说明</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('SVG2', 'painting.html#PaintOrder', 'paint-order')}}</td>
<td>{{Spec2('SVG2')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div class="hidden">本页的兼容性表是以结构化数据来保证的 ，如果你想贡献数据, 请访问<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且给我们发一个pull request</div>
<p>{{Compat("css.properties.paint-order")}}</p>
|
