height
height 屬性定義了元素在使用者座標系統中的垂直長度。
你可以將此屬性與以下 SVG 元素一起使用
<feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feDropShadow><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><foreignObject><image><mask><pattern><rect><svg><use>
示例
<svg viewBox="0 0 300 100" xmlns="http://www.w3.org/2000/svg">
<!-- With a height of 0 or less, nothing will be rendered -->
<rect y="0" x="0" width="90" height="0" />
<rect y="0" x="100" width="90" height="60" />
<rect y="0" x="200" width="90" height="100%" />
</svg>
feBlend
對於 <feBlend>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feColorMatrix
對於 <feColorMatrix>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feComponentTransfer
對於 <feComponentTransfer>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feComposite
對於 <feComposite>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feConvolveMatrix
對於 <feConvolveMatrix>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feDiffuseLighting
對於 <feDiffuseLighting>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feDisplacementMap
對於 <feDisplacementMap>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feDropShadow
對於 <feDropShadow>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feFlood
對於 <feFlood>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feGaussianBlur
對於 <feGaussianBlur>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feImage
對於 <feImage>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feMerge
對於 <feMerge>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feMorphology
對於 <feMorphology>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feOffset
對於 <feOffset>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feSpecularLighting
對於 <feSpecularLighting>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feTile
對於 <feTile>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
feTurbulence
對於 <feTurbulence>,height 定義了基元渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 100% |
| 可動畫的 | 是 |
filter
對於 <filter>,height 定義了濾鏡渲染區域的垂直長度。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 120% |
| 可動畫的 | 是 |
foreignObject
對於 <foreignObject>,height 定義了引用文件渲染區域的垂直長度。
| 值 |
auto | <length> | <percentage> |
|---|---|
| 預設值 | auto (視為 0) |
| 可動畫的 | 是 |
注意:從 SVG2 開始,height 是一個幾何屬性(Geometry Property),這意味著此屬性也可以作為 <foreignObject> 的 CSS 屬性使用。
圖片
對於 <image>,height 定義了影像的垂直長度。
| 值 |
auto | <length> | <percentage> |
|---|---|
| 預設值 | auto (視為影像的固有高度) |
| 可動畫的 | 是 |
注意:從 SVG2 開始,height 是一個幾何屬性(Geometry Property),這意味著此屬性也可以作為影像的 CSS 屬性使用。
mask
對於 <mask>,height 定義了其作用區域的垂直長度。此屬性的具體效果受 maskUnits 屬性的影響。
| 值 | <length> | <percentage> |
|---|---|
| 預設值 | 120% |
| 可動畫的 | 是 |
pattern
對於 <pattern>,height 定義了平鋪圖案的垂直長度。此屬性的具體效果受 patternUnits 和 patternTransform 屬性的影響。
| 值 | <length> |
|---|---|
| 預設值 | 0 |
| 可動畫的 | 是 |
rect
對於 <rect>,height 定義了矩形的垂直長度。
| 值 |
auto | <length> | <percentage> |
|---|---|
| 預設值 | auto (視為 0) |
| 可動畫的 | 是 |
注意:從 SVG2 開始,height 是一個幾何屬性(Geometry Property),這意味著此屬性也可以作為矩形的 CSS 屬性使用。
svg
對於 <svg>,height 定義了 SVG 視口渲染區域的垂直長度。
注意:在 HTML 文件中,如果 viewBox 和 height 屬性都省略了,SVG 元素的渲染高度將是 150px
| 值 |
auto | <length> | <percentage> |
|---|---|
| 預設值 | auto (視為 100%) |
| 可動畫的 | 是 |
注意:從 SVG2 開始,height 是一個幾何屬性(Geometry Property),這意味著此屬性也可以作為 <svg> 的 CSS 屬性使用。
use
對於 <use>,height 定義了引用元素的垂直長度。
| 值 |
auto | <length> | <percentage> |
|---|---|
| 預設值 | auto (視為 0) |
| 可動畫的 | 是 |
注意:height 對 use 元素沒有影響,除非引用的元素具有 viewBox — 即,它們僅在 use 引用 svg 或 symbol 元素時才有效。
注意:從 SVG2 開始,height 是一個幾何屬性(Geometry Property),這意味著此屬性也可以作為被使用元素的 CSS 屬性使用。
規範
另見
- CSS
height屬性