SVG LinearGradientElement.y1

The LinearGradientElement.y1 property is related to the y coordinate of the starting point of a linear gradient.

A linear gradient is a painted gradient vector that smoothly transitions from one color to another in a straight line. The y1 property specifies the vertical position of the starting point of the gradient.

Here's an example of using the LinearGradientElement with the y1 property:

<svg width="400" height="400">
  <defs>
    <linearGradient id="Gradient1" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="blue" />
    </linearGradient>
  </defs>
  <rect x="10" y="10" width="200" height="200" fill="url(#Gradient1)" />
</svg>

In this example, we define a linear gradient with id="Gradient1". The x1 and y1 properties define the starting point of the gradient, and the x2 and y2 properties define the ending point of the gradient. We apply this gradient to a rectangle using the fill property with fill="url(#Gradient1)".

By changing the value of the y1 property, we can change the vertical position of the starting point of the gradient.

<linearGradient id="Gradient2" x1="0" y1="50%" x2="1" y2="50%">
  <stop offset="0%" stop-color="red" />
  <stop offset="100%" stop-color="blue" />
</linearGradient>

In this example, we move the starting point of the gradient to the middle of the element by setting y1="50%".

Overall, LinearGradientElement.y1 is an important property for creating custom gradients in SVG. By controlling the vertical position of the starting point of a linear gradient, developers can create unique visual effects and transitions.