height

height 属性は、ユーザー座標系における要素の垂直方向の長さを定義します。

この属性は以下の SVG 要素で使用することができます。

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>
既定値 auto0 として扱われる)
アニメーション

メモ: SVG2 から height は幾何プロパティであり、この属性は <foreignObject> の CSS プロパティとしても使用することができます。

image

<image> の場合、 height は画像の垂直方向の長さを定義します。

auto | <length> | <percentage>
既定値 auto(画像の内在的なtreated as the intrinsic height of the image)
アニメーション

メモ: SVG2 から height は幾何プロパティであり、この属性は画像の CSS プロパティとしても使用することができます。

mask

<mask> の場合、 height は効果の領域の垂直方向の長さを定義します。この属性の正確な効果は、maskUnits 属性の影響を受けます。

<length> | <percentage>
既定値 120%
アニメーション

pattern

<pattern> の場合、 height はタイルパターンの垂直方向の長さを定義します。この属性の正確な効果は、 patternUnitspatternTransform 属性の影響を受けます。

<length>
既定値 0
アニメーション

rect

<rect> の場合、 height は矩形の垂直方向の長さを定義します。

auto | <length> | <percentage>
既定値 auto0 として扱われる)
アニメーション

メモ: SVG2 から height は幾何プロパティであり、この属性は矩形の CSS プロパティとしても使用することができます。

svg

<svg> の場合、 height は SVG ビューポートの描画領域の垂直方向の長さを定義します。

メモ: HTML 文書内の viewBox 属性と height 属性の両方が省略された場合、 svg 要素は高さ 150px で表示されます

auto | <length> | <percentage>
既定値 auto (treated as 100%)
アニメーション

メモ: SVG2 から height は幾何プロパティであり、この属性は <svg> の CSS プロパティとしても使用することができます。

use

<use> の場合、 height は参照先要素の垂直方向の長さを定義します。

auto | <length> | <percentage>
既定値 auto0 として扱われる)
アニメーション

メモ: 参照する要素が viewBox を持っていない限り、 heightuse 要素には効果がありません。つまり、usesvg または symbol 要素を参照している場合にのみ効果があります。

メモ: SVG2 から height は幾何プロパティであり、この属性は使用される要素の CSS プロパティとしても使用することができます。

仕様書

Specification
Filter Effects Module Level 1
# element-attrdef-filter-height
Filter Effects Module Level 1
# element-attrdef-filter-primitive-height
CSS Masking Module Level 1
# element-attrdef-mask-height
Scalable Vector Graphics (SVG) 2
# Sizing
Scalable Vector Graphics (SVG) 2
# PatternElementHeightAttribute