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属性