height

**height** 属性在用户坐标系中定义元素的垂直长度。

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

示例

html,
body,
svg {
  height: 100%;
}

html

<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 是一个几何属性，这意味着此属性也可以用作 <foreignObject> 的 CSS 属性。

image

对于 <image>，height 定义图像的垂直长度。

值	`auto` \| <length> \| <percentage>
默认值	`auto`（视为图像的固有高度）
可动画	是

注意：从 SVG2 开始，height 是一个几何属性，这意味着此属性也可以用作图像的 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 是一个几何属性，这意味着此属性也可以用作矩形的 CSS 属性。

svg

对于 <svg>，height 定义 SVG 视口的渲染区域的垂直长度。

注意：在 HTML 文档中，如果同时省略了viewBox 和 height 属性，svg 元素将以 150px 的高度渲染

值	`auto` \| <length> \| <percentage>
默认值	`auto`（视为 `100%`）
可动画	是

注意：从 SVG2 开始，height 是一个几何属性，这意味着此属性也可以用作 <svg> 的 CSS 属性。

use

对于 <use>，height 定义了所引用元素的垂直长度。

值	`auto` \| <length> \| <percentage>
默认值	`auto`（视为 `0`）
可动画	是

注意：height 对 use 元素没有影响，除非所引用元素具有 viewBox - 即，只有当 use 引用 svg 或 symbol 元素时，它们才会产生影响。

注意：从 SVG2 开始，height 是一个几何属性，这意味着此属性也可以用作已使用元素的 CSS 属性。

规范

规范
滤镜效果模块级别 1 # element-attrdef-filter-height
滤镜效果模块级别 1 # element-attrdef-filter-primitive-height
CSS 遮罩模块级别 1 # element-attrdef-mask-height
可缩放矢量图形 (SVG) 2 # 大小调整
可缩放矢量图形 (SVG) 2 # PatternElementHeightAttribute