height
The height
attribute defines the vertical length of an element in the user coordinate system.
You can use this attribute with the following SVG elements:
<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>
Example
<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
For <feBlend>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feColorMatrix
For <feColorMatrix>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feComponentTransfer
For <feComponentTransfer>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feComposite
For <feComposite>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feConvolveMatrix
For <feConvolveMatrix>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feDiffuseLighting
For <feDiffuseLighting>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feDisplacementMap
For <feDisplacementMap>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feDropShadow
For <feDropShadow>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feFlood
For <feFlood>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feGaussianBlur
For <feGaussianBlur>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feImage
For <feImage>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feMerge
For <feMerge>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feMorphology
For <feMorphology>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feOffset
For <feOffset>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feSpecularLighting
For <feSpecularLighting>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feTile
For <feTile>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
feTurbulence
For <feTurbulence>
, height
defines the vertical length for the rendering area of the primitive.
Value | <length> | <percentage> |
---|---|
Default value | 100% |
Animatable | Yes |
filter
For <filter>
, height
defines the vertical length for the rendering area of the filter.
Value | <length> | <percentage> |
---|---|
Default value | 120% |
Animatable | Yes |
foreignObject
For <foreignObject>
, height
defines the vertical length for the rendering area for the referenced document.
Value |
auto |
<length>
|
<percentage>
|
---|---|
Default value | auto (treated as 0 ) |
Animatable | Yes |
Note: Starting with SVG2, height
is a Geometry Property meaning this attribute can also be used as a CSS property for <foreignObject>
.
image
For <image>
, height
defines the vertical length for the image.
Value |
auto |
<length>
|
<percentage>
|
---|---|
Default value | auto (treated as the intrinsic height of the image) |
Animatable | Yes |
Note: Starting with SVG2, height
is a Geometry Property meaning this attribute can also be used as a CSS property for images.
mask
For <mask>
, height
defines the vertical length of its area of effect. The exact effect of this attribute is influenced by the maskUnits
attribute.
Value | <length> | <percentage> |
---|---|
Default value | 120% |
Animatable | Yes |
pattern
For <pattern>
, height
defines the vertical length of the tile pattern. The exact effect of this attribute is influenced by the patternUnits
and patternTransform
attributes.
Value | <length> |
---|---|
Default value | 0 |
Animatable | Yes |
rect
For <rect>
, height
defines the vertical length for the rectangle.
Value |
auto |
<length>
|
<percentage>
|
---|---|
Default value | auto (treated as 0 ) |
Animatable | Yes |
Note: Starting with SVG2, height
is a Geometry Property meaning this attribute can also be used as a CSS property for rectangles.
svg
For <svg>
, height
defines the vertical length for the rendering area of the SVG viewport.
Note: In an HTML document if both the viewBox
and height
attributes are omitted, the svg element will be rendered with a height of 150px
Value |
auto |
<length>
|
<percentage>
|
---|---|
Default value | auto (treated as 100% ) |
Animatable | Yes |
Note: Starting with SVG2, height
is a Geometry Property meaning this attribute can also be used as a CSS property for <svg>
.
use
For <use>
, height
defines the vertical length for the referenced element.
Value |
auto |
<length>
|
<percentage>
|
---|---|
Default value | auto (treated as 0 ) |
Animatable | Yes |
Note: height
has no effect on use
elements, unless the element referenced has a viewBox - i.e. they only have an effect when use
refers to a svg
or symbol
element.
Note: Starting with SVG2, height
is a Geometry Property meaning this attribute can also be used as a CSS property for used elements.