overflow
overflow 屬性用於設定當元素的**內容過大**,無法完全容納在其塊級格式上下文中時應執行的操作。此功能尚未廣泛實現。
此屬性的值和含義與 CSS 的 overflow 屬性相同,但有以下附加說明:
- 如果值為
visible,則該屬性無效(即,不會建立裁剪矩形)。 - 如果
overflow屬性的值為hidden或scroll,則會應用一個與 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 |
瀏覽器相容性
載入中…
另見
- CSS
overflow屬性