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

They read-only property of theSVGPatternElement interface describes the y-axis coordinate of the start point of the pattern as anSVGAnimatedLength. It reflects the computed value of they attribute on the<pattern> element.

The attribute value can be a<length>,<percentage>, or<number>. The numeric value of theSVGAnimatedLength.baseVal is the y-coordinate of the pattern's starting point 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           y="50"      width="20"      height="20"      patternUnits="userSpaceOnUse">      <circle cx="10" cy="10" r="10" fill="blue" />    </pattern>    <!-- Second pattern -->    <pattern           y="100"      width="20"      height="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 they attributes:

const patterns = document.querySelectorAll("pattern");console.log(patterns[0].y.baseVal.value); // output: 50console.log(patterns[1].y.baseVal.value); // output: 100