overflow

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

overflow 属性用于设置当元素的**内容过大**,无法完全容纳在其块级格式上下文中时应执行的操作。此功能尚未广泛实现

此属性的值和含义与 CSS 的 overflow 属性相同,但有以下附加说明:

  • 如果值为 visible,则该属性无效(即,不会创建裁剪矩形)。
  • 如果 overflow 属性的值为 hiddenscroll,则会应用一个与 SVG 视口大小完全相同的裁剪区域。
  • 当在 <svg> 元素上指定 scroll 时,通常会显示 SVG 视口的滚动条或平移器,无论其内容是否被裁剪。
  • 在 SVG 内容中,auto 值意味着子元素的所有渲染内容都必须可见,可以通过滚动机制或不进行裁剪来显示。

注意: 尽管 overflow 的初始值为 auto,但在用户代理样式表中,当 <svg> 元素不是独立文档的根元素时,<pattern> 元素以及 <marker> 元素时,该值会被覆盖为默认隐藏。

注意: 作为表现属性 (presentation attribute),overflow 还有一个对应的 CSS 属性:overflow。当两者都指定时,CSS 属性具有更高的优先级。

你可以将此属性与以下 SVG 元素一起使用

示例

html
<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>

用法说明

visible | hidden | scroll | auto
默认值 visible
可动画的

关于这些值的描述,请参阅 CSS overflow 属性。

规范

规范
CSS 溢出模块第 3 级
# propdef-overflow
Scalable Vector Graphics (SVG) 2
# OverflowAndClipProperties

浏览器兼容性

另见