SVGPatternElement: height property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

The height read-only property of the SVGPatternElement interface describes the height of the pattern as an SVGAnimatedLength. It reflects the computed value of the height attribute on the <pattern> element.

The attribute value can be a <length>, <percentage>, or <number>. The numeric value of the SVGAnimatedLength.baseVal represents the height of the pattern in the user coordinate system.

Value

An SVGAnimatedLength.

Example

Given the following SVG:

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <defs> <!-- First pattern --> <pattern id="pattern1" x="50" height="20" width="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" fill="blue" /> </pattern> <!-- Second pattern --> <pattern id="pattern2" x="100" height="40" width="20" patternUnits="userSpaceOnUse"> <circle cx="10" cy="10" r="10" fill="red" /> </pattern> </defs> <!-- Using the patterns --> <rect x="0" y="0" width="100" height="100" fill="url(#pattern1)" /> <rect x="100" y="0" width="100" height="100" fill="url(#pattern2)" /> </svg>

We can access the computed values of the x attributes:

const patterns = document.querySelectorAll("pattern"); console.log(patterns[0].height.baseVal.value); // output: 20 console.log(patterns[1].height.baseVal.value); // output: 40