x1

The SVG x1 attribute is used to specify the first x-coordinate for drawing an SVG element that requires more than one coordinate. Elements that only need one coordinate use the x attribute instead.

For the <line> element, this attribute specifies the x-coordinate of the first of the two endpoints of the line. If the x1 attribute isn't provided, a default value of 0 is assumed.

For the <linearGradient> element, this attribute specifies the x-coordinate of the start of the vector gradient onto which the color stops defined by the enclosed <stop> elements are mapped. Without the x1 attribute, the vector gradient starts at 0%.

Usage context

<coordinate>

A <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for X coordinates, the y-axis for Y coordinates). Its syntax is the same as that for <length>.

Within the SVG DOM, a <coordinate> is represented as an SVGLength or an SVGAnimatedLength.

Example

Drawing lines

In this example, three lines are drawn from various starting points to the same endpoints.

<svg width="120" height="120"
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

    <line x1="10"
          y1="10" x2="60" y2="110"
          stroke="red" />

    <line x1="60"
          y1="10" x2="60" y2="110"
          stroke="black" />

    <line x1="110"
          y1="10" x2="60" y2="110"
          stroke="blue" />
</svg>

The example begins by establishing a 120 by 120 pixel <svg> element to contain the drawing.

In the SVG context, we have three <line> elements. The first draws a red line from (10, 10) to (60, 110), the second draws a black line from (60, 10) to (60, 110), and the third draws a blue line from (110, 10) to (60, 110).

Note that the three <line> elements use values of x1 of 10, 60, and 110, respectively.

Creating and using gradients

This example creates two linear gradients; the first uses default values for the color stops' vector gradient, while the second uses a different value for x1 and x2.

<svg width="250" height="120"  viewBox="0 0 250 120"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >

    <defs>
        <linearGradient id="gradient1">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>

        <linearGradient id="gradient2"
            x1="50%">
            <stop offset="5%"  stop-color="green"/>
            <stop offset="95%" stop-color="gold"/>
        </linearGradient>
    </defs>

    <rect fill="url(#gradient1)"
          x="10" y="10" width="100" height="100"/>
    
    <rect fill="url(#gradient2)"
          x="120" y="10" width="100" height="100"/>
</svg>

After establishing an SVG context which is 250 pixels wide and 120 tall, this example begins by constructing the two gradients for future use. This is done inside a <defs> element, since we want to create them for use later on.

The first gradient doesn't explicitly specify a vector gradient using x1, y1, x2, and y2. Because of that, a default vector of (0%, 0%) to (100%, 0%) is used. This means the gradient's color stops are mapped across the full width of the gradient, rather than being inset from the ends of the gradient.

The second gradient, cleverly named gradient2, sets x1 to a value of 50%. Combined with the default values of the other coordinate attributes, the vector gradient becomes (50%, 0) to (100%, 0). As a result, the color stops are inset so that a color stop at offset 0% is actually located halfway across the width of the gradient, with the remaining color stops adjusted to fit in the remaining space.

The value of x1 is the only thing that differs between the two gradients.

Once the gradients have been created, two identically-sized rectangles are drawn next to each other using <rect> elements. Each uses the fill attribute to specify one of the two gradients to fill the interior of the rectangle with.

The results are shown above.

Elements

The following elements can use the x1 attribute:

• <line>
• <linearGradient>

See also

• Gradients in SVG
• The other two-coordinate attributes: x2, y2, and y1
• Using CSS gradients