« SVG Attribute reference home
The overflow
attribute has the same parameter values as defined for the css overflow property
. However, the following additional points apply:
- The
overflow
attribute only applies to elements that establish new viewports (see below),<pattern>
elements and<marker>
elements. For all other elements, the property has no effect. - For those elements to which the
overflow
attribute can apply, if theoverflow
attribute has the valuehidden
orscroll
, the effect is that a new clipping path in the shape of a rectangle is created. The result is equivalent to defining a<clipPath>
element whose content is a<rect>
element which defines the equivalent rectangle, and then specifying the <uri> of this<clipPath>
element on theclip-path
attribute for the given element. - If the
overflow
attribute has a value other thanhidden
orscroll
, the property has no effect. - Within SVG content, the value
auto
is equivalent to the valuevisible
. - When an outermost svg element is embedded inline within HTML, if the
overflow
attribute has the valuehidden
orscroll
, 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 isvisible
, and this applies also to the root<svg>
element; however, for child elements of an SVG document, SVG's browser style sheet overrides this initial value and sets theoverflow
attribute on elements that establish new viewports, ‘pattern’ elements and ‘marker’ elements to the valuehidden
.
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see 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