Open In App

SVG y1 Attribute

Last Updated : 31 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The y1 attribute is used to specify the first y-coordinate for drawing an SVG element that requires more than one coordinate.

Elements that are using this attribute:

Syntax:

y1 = "y1-coordinate"

Attribute Values:

  • length: :Length at which we want to set the y1-coordinate.
  • percentage: Percentage at which we want to set the y1-coordinate.

We will use the y1 attribute for setting the y1-coordinate.

Example 1: In this example we will use the length value.




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 70 70" 
        xmlns="http://www.w3.org/2000/svg">
          
        <line x1="1" x2="9" y1="5" 
            y2="5" stroke="green" />
          
        <line x1="1" x2="9" y1="7" 
            y2="7" stroke="green" />
    </svg>
</body>
  
</html>


Output:

Example 2: In this example we will use the percentage value. 




<!DOCTYPE html>
<html>
  
<body>
    <svg viewBox="0 0 70 70" 
        xmlns="http://www.w3.org/2000/svg">
  
        <line x1="3%" x2="27%" y1="15%" 
            y2="15%" stroke="green" />
    </svg>
</body>
  
</html>


Output:



Previous Article
Next Article

Similar Reads

SVG &lt;svg&gt; Element
SVG stands for Scalable Vector Graphic. It can be used to make graphics and animations like in HTML canvas. SVG graphics are supported by the &lt;svg&gt; element in HTML. SVG graphics feature a container in which we can create a variety of shapes such as boxes, pathways, text, graphic images, and circles. Syntax: &lt;svg width="x" height="y"&gt; sh
2 min read
SVG from Attribute
The from attribute indicates the initial value of an attribute, it is used with to attribute. Syntax: from="number" Attribute Values: number: number at which we want to set from attributeWe will use the from attribute for setting the initial value. Example 1: C/C++ Code &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;svg viewBox=&quot;0 0 1000
1 min read
SVG fill Attribute
The fill attribute can be used in two things. For shapes and text, it's a presentation attribute that defines the color used to paint the element. For animation it defines the final state of the animation. Syntax: fill= "colour" Attribute Values: paint: The color in which we want to paint the element. We will use the fill attribute for setting the
1 min read
SVG viewBox Attribute
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis. It is used to make the SVG move on a horizontal axis (i.e Left and Right).min-y: I
4 min read
SVG y Attribute
The y attribute defines the y-axis coordinate in the user coordinate system. Syntax: y = "y-coordinate" Attribute Values: length: length at which we want to set the x-axis. percentage: percentage at which we want to set the x-axis. We will use the y attribute for setting the y coordinate for the elements. Example 1: Group of rectangle elements with
1 min read
SVG x Attribute
The x attribute defines an x-axis coordinate in the user coordinate system. Syntax: x = "x-coordinate" Attribute Values: length: Length at which we want to set the x-axis.percentage: Percentage at which we want to set the x-axis.We will use the x attribute for setting x coordinate for the elements. Example 1: Rectangle element with the different x-
1 min read
SVG rx Attribute
The rx attribute defines a radius on the x-axis. Elements that are using this attribute: &lt;ellipse&gt; &lt;rect&gt; Syntax: rx = "x-radius" Attribute Values: length: Length at which we want to set the x-radius.percentage: Percentage at which we want to set the x-radius.We will use the rx attribute for setting the radius on the x-axis. Example 1:
1 min read
SVG width Attribute
The width attribute defines the vertical length of an element. Syntax: width= "width" Attribute Values: length: Length at which we want to set the width attribute. percentage: Percentage at which we want to set the width attribute. We will use the width attribute for setting the width of the element. Example 1: In this example we will use the width
1 min read
SVG opacity Attribute
The opacity attribute specifies the transparency of an object or of a group of objects. Syntax: opacity= "opacity" Attribute Values: decimal: The decimal at which we want to make our element opaque We will use the opacity attribute for setting the opacity of the element. Example 1: In this example we will use the opacity attribute for setting the o
1 min read
SVG stroke-width Attribute
The stroke-width attribute is an attribute defining the width of the stroke applied to the shape. Syntax: stroke-width="length" Attribute Values: length: Length at which we want to set the stroke-width attributepercentage: Percentage at which we want to set the stroke-width attribute We will use the stroke-width attribute for setting the width of t
1 min read