---
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">&lt;svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;!-- Here the yellow rectangle is displayed --&gt;
  &lt;rect x="0" y="0" width="100" height="100" fill="skyblue"&gt;&lt;/rect&gt;
  &lt;rect x="20" y="20" width="60" height="60" fill="yellow"&gt;&lt;/rect&gt;

  &lt;!-- Here the yellow rectangle is not displayed --&gt;
  &lt;rect x="120" y="0" width="100" height="100" fill="skyblue"&gt;&lt;/rect&gt;
  &lt;rect x="140" y="20" width="60" height="60" fill="yellow" display="none"&gt;&lt;/rect&gt;
&lt;/svg&gt;</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>