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

瀏覽器相容性

另見