x1

« SVG Attribute reference home

For the <line> element, this attribute define the x-axis coordinate of the start of the line. If the attribute is not specified, the effect is as if a value of 0 were specified.

For the <linearGradient> element, this attribute define the x-axis coordinate of the start of the vector gradient onto which the <stop> elements are mapped. If the attribute is not specified, the effect is as if a value of 0% were specified.

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

The x1 attribute on the <line> element

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

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

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

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

» x1.svg

The x1 attribute on the <linearGradient> element

<?xml version="1.0"?>
<svg width="120" height="120"  viewBox="0 0 120 120"
     xmlns="https://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="https://www.w3.org/1999/xlink" >

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

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

» linearGradient.svg

Elements

The following elements can use the x1 attribute

• <line>
• <linearGradient>

See also

• x2
• y2
• y1