mozilla

Revision 232717 of overflow

  • Revision slug: SVG/Attribute/overflow
  • Revision title: overflow
  • Revision id: 232717
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 380 words added

Revision Content

« SVG Attribute reference home

The overflow attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. however, the following additional points apply:

  • The overflow attribute applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.
  • For those elements to which the overflow attribute can apply, if the overflow attribute has the value hidden or scroll, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the <uri> of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.
  • If the overflow attribute has a value other than hidden or scroll, the property has no effect.
  • Within SVG content, the value auto is equivalent to the value visible.
  • When an outermost svg element is embedded inline within HTML, if the overflow attribute has the value hidden or scroll, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.
  • When an outermost svg element is stand-alone, the overflow attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.
  • The initial value for overflow as defined in CSS is visible, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the overflow attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value hidden.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.

Usage context

Categories Presentation attribute
Value visible | hidden | scroll | auto | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

Example

Elements

The following elements can use the overflow attribute

  • {{ SVGElement("svg") }}
  • {{ SVGElement("symbol") }}
  • {{ SVGElement("image") }}
  • {{ SVGElement("foreignObject") }}
  • {{ SVGElement("pattern") }}
  • {{ SVGElement("marker") }}

See also

  • {{ cssxref("overflow","CSS overflow") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>overflow</code> attribute has the same parameter values as defined for the {{ cssxref("overflow","CSS overflow property") }}. however, the following additional points apply:</p>
<ul> <li>The <code>overflow</code> attribute applies to elements that establish new viewports (see below), {{ SVGElement("pattern") }} elements and {{ SVGElement("marker") }} elements. For all other elements, the property has no effect.</li> <li>For those elements to which the <code>overflow</code> attribute can apply, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a {{ SVGElement("clipPath") }} element whose content is a {{ SVGElement("rect") }} element which defines the equivalent rectangle, and then specifying the &lt;uri&gt; of this {{ SVGElement("clipPath") }} element on the {{ SVGAttr("clip-path") }} attribute for the given element.</li> <li>If the <code>overflow</code> attribute has a value other than <code>hidden</code> or <code>scroll</code>, the property has no effect.</li> <li>Within SVG content, the value <code>auto</code> is equivalent to the value <code>visible</code>.</li> <li>When an outermost svg element is embedded inline within HTML, if the <code>overflow</code> attribute has the value <code>hidden</code> or <code>scroll</code>, then the browser will establish an initial clipping path equal to the bounds of the initial viewport; otherwise, the initial clipping path is set according to the CSS clipping rules.</li> <li>When an outermost svg element is stand-alone, the <code>overflow</code> attribute on the outermost svg element is ignored for the purposes of visual rendering and the initial clipping path is set to the bounds of the initial viewport.</li> <li>The initial value for <code>overflow</code> as defined in CSS is <code>visible</code>, and this applies also to the root {{ SVGElement("svg") }} element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets the <code>overflow</code> attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the value <code>hidden</code>.</li>
</ul>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("overflow","CSS overflow") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td>visible | hidden | scroll | auto | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty" title="http://www.w3.org/TR/SVG11/masking.html#OverflowProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>overflow</code> attribute</p>
<ul> <li>{{ SVGElement("svg") }}</li> <li>{{ SVGElement("symbol") }}</li> <li>{{ SVGElement("image") }}</li> <li>{{ SVGElement("foreignObject") }}</li> <li>{{ SVGElement("pattern") }}</li> <li>{{ SVGElement("marker") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("overflow","CSS overflow") }}</li>
</ul>
Revert to this revision