SVGPatternElement: width 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⁩.

Thewidth read-only property of theSVGPatternElement interface describes the width of the pattern as anSVGAnimatedLength. It reflects the computed value of thewidth attribute on the<pattern> element.

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

Value

AnSVGAnimatedLength.

Example

Given the following SVG:

html

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">  <defs>    <!-- First pattern -->    <pattern           x="50"      height="20"      width="20"      patternUnits="userSpaceOnUse">      <circle cx="10" cy="10" r="10" fill="blue" />    </pattern>    <!-- Second pattern -->    <pattern           x="100"      height="40"      width="40"      patternUnits="userSpaceOnUse">      <circle cx="20" cy="20" 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 thex attributes:

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