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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: display
slug: Web/SVG/Attribute/display
translation_of: Web/SVG/Attribute/display
---
<div>{{SVGRef}}</div>
<p>The <code><strong>display</strong></code> attribute lets you control the rendering of graphical or container elements.</p>
<p><code><strong>display</strong></code>属性让你可以控制图形元素或容器元素的渲染。</p>
<p>A value of <code>display="none"</code> indicates that the given element and its children will not be rendered. Any value other than <code>none</code> or <code>inherit</code> indicates that the given element will be rendered by the browser.</p>
<p><code>display="none"</code>表示该元素和它的子元素不会被渲染。而非<code>none</code>或<code>inherit</code>的值表示元素会被浏览器渲染。</p>
<p>When applied to a container element, setting <code>display</code> to <code>none</code> causes the container and all of its children to be invisible; thus, it acts on groups of elements as a group. This means that any child of an element with <code>display="none"</code> will never be rendered even if the child has a value for <code>display</code> other than <code>none</code>.</p>
<p>当应用到容器元素时，将<code>display</code>设为<code>none</code>会导致容器与它所有的子元素不可见，如此看来，它在一组元素中表现地像一个元素组。这表示具有<code>display="none"</code>属性元素的所有子元素都不会被渲染，即使子元素的<code>display</code>并不是<code>none</code>。</p>
<p>When the <code>display</code> attribute is set to <code>none</code>, then the given element does not become part of the rendering tree. It has implications for the {{SVGElement("tspan")}}, {{SVGElement("tref")}}, and {{SVGElement("altGlyph")}} elements, event processing, for bounding box calculations and for calculation of clipping paths:</p>
<p><code>display</code>属性被设为<code>none</code>的元素不会成为渲染树的一部分。它涉及到{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 和 {{SVGElement("altGlyph")}}元素、用于盒边界与路径剪裁计算的事件处理。</p>
<ul>
<li>If <code>display</code> is set to <code>none</code> on a {{SVGElement("tspan")}}, {{SVGElement("tref")}}, or {{SVGElement("altGlyph")}} element, then the text string is ignored for the purposes of text layout.</li>
</ul>
<p> 如果在{{SVGElement("tspan")}}, {{SVGElement("tref")}}, 或{{SVGElement("altGlyph")}}元素中<code>display</code>的属性值被设为<code>none</code>,则为了文字布局，文字字符串会被忽视掉。</p>
<ul>
<li>Regarding events, if <code>display</code> is set to <code>none</code>, the element receives no events.</li>
</ul>
<p> 至于事件，如果<code>display</code>被设为<code>none</code>则该元素不接受任何事件。</p>
<ul>
<li>The geometry of a <a href="/en-US/docs/Web/SVG/Element#Graphics_elements">graphics element</a> with <code>display</code> set to <code>none</code> is not included in bounding box and clipping paths calculations.</li>
</ul>
<p> 图形元素的<code>display</code>属性被设为<code>none</code>则不会被盒边界和路径剪裁计算中包含进去。</p>
<p>The <code>display</code> attribute only affects the direct rendering of a given element, whereas it does not prevent elements from being referenced by other elements. For example, setting it to <code>none</code> on a {{SVGElement("path")}} element will prevent that element from getting rendered directly onto the canvas, but the {{SVGElement("path")}} element can still be referenced by a {{SVGElement("textPath")}} element; furthermore, its geometry will be used in text-on-a-path processing even if the {{SVGElement("path")}} has a <code>display</code> value of <code>none</code>.</p>
<p><code>display</code>属性只影响能被直接渲染的元素，尽管它不能防止该元素被其他元素参考。例如：将{SVGElement("path")}}元素设为none，会使得该元素不会被直接渲染到canvas上，但是{{SVGElement("textPath")}}元素依旧会参考{{SVGElement("path")}}。此外，即便{SVGElement("path")}}的<code>display</code>为<code>none</code>，它的形状在处理路径上的文本时仍然会被用到。</p>
<p>This attribute also affects direct rendering into offscreen canvases, such as occurs with masks or clip paths. Thus, setting <code>display="none"</code> on a child of a {{SVGElement("mask")}} will prevent the given child element from being rendered as part of the mask. Similarly, setting <code>display="none"</code> on a child of a {{SVGElement("clipPath")}} element will prevent the given child element from contributing to the clipping path.</p>
<p>这个属性也能影响直接渲染到屏幕外的画布，比如遮罩或路径剪裁。因此，把{{SVGElement("mask")}}元素的一个子元素设为<code>display="none"</code>将会阻止子元素参与到路径剪裁中。</p>
<p class="note"><strong>Note:</strong> As a presentation attribute, <code>display</code> can be used as a CSS property. See {{cssxref("display", "CSS display")}} for further information.</p>
<p>As a presentation attribute, it can be applied to any element.</p>
<div id="topExample">
<div class="hidden">
<pre class="brush: css notranslate">html, body, svg {
height: 100%;
}</pre>
</div>
<pre class="brush: html notranslate"><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Here the yellow rectangle is displayed -->
<rect x="0" y="0" width="100" height="100" fill="skyblue"></rect>
<rect x="20" y="20" width="60" height="60" fill="yellow"></rect>
<!-- Here the yellow rectangle is not displayed -->
<rect x="120" y="0" width="100" height="100" fill="skyblue"></rect>
<rect x="140" y="20" width="60" height="60" fill="yellow" display="none"></rect>
</svg></pre>
<p>{{EmbedLiveSample("topExample", "240", "120")}}</p>
</div>
<h2 id="Usage_notes">Usage notes</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row">Default value</th>
<td><code>inline</code></td>
</tr>
<tr>
<th scope="row">Value</th>
<td>{{csssyntax("display")}}</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<p>For a description of the values, please refer to the {{cssxref("display", "CSS display")}} property.</p>
<h2 id="Specifications">Specifications</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", "render.html#VisibilityControl", "display")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Refers to the CSS 2 specification of the <code>display</code> property, but outlines the differences regarding SVG.</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "painting.html#DisplayProperty", "display")}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("svg.attributes.presentation.display")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>{{SVGAttr("visibility")}} attribute</li>
<li>{{cssxref("display", "CSS display")}}</li>
</ul>
|
