The overflow attribute sets what to do when an element's content is too big to fit in its block formatting context. It has the same parameter values and meaning as the css overflow property, however, the following additional points apply:

  • If it has a value of visible, the attribute has no effect (i.e., a clipping rectangle is not created).
  • If the overflow property has the value hidden or scroll, a clip of the exact size of the SVG viewport is applied.
  • When scroll is specified on an <svg> element, a scrollbar or panner is normally shown for the SVG viewport whether or not any of its content is clipped.
  • Within SVG content, the value auto implies that all rendered content for child elements must be visible, either through a scrolling mechanism, or by rendering with no clip.
Although the initial value for overflow is auto, it is overwritten in the User Agent style sheet for the <svg> element when it is not the root element of a stand-alone document, the <pattern> element, and the <marker> element to be hidden by default.

Note: As a presentation attribute, overflow can be used as a CSS property. See the css opacity property for more information.

As a presentation attribute, it can be applied to any element but it has effect only on the following eight elements: <foreignObject>, <iframe>, <image>, <marker>, <pattern>, <symbol>, <svg>, and <text>

<svg viewBox="0 0 200 30" xmlns="http://www.w3.org/2000/svg" overflow="auto">
  <text y="20">This text is wider than the SVG, so there should be a scrollbar shown.</text>
</svg>

Usage notes

Value visible | hidden | scroll | auto
Default value visible
Animatable Yes

For a description of the values, please see the css overflow property.

Specifications

Specification Status Comment
CSS Level 2 (Revision 1)
The definition of 'overflow' in that specification.
Recommendation Definition in CSS
Scalable Vector Graphics (SVG) 2
The definition of 'overflow' in that specification.
Candidate Recommendation Simplifies the definition and outlines the values within the user agent stylesheet.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'overflow' in that specification.
Recommendation Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
overflowChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Compatibility unknown  
Compatibility unknown

See also

Document Tags and Contributors

Tags: 
Contributors to this page: Sebastianz, mdnwebdocs-bot, connorshea, Tigt, Jeremie
Last updated by: Sebastianz,