SVG Line
SVG (Scalable Vector Graphics) is a markup language used for creating vector graphics. To create a line in SVG, you can use the <line> element.
Here's an example of a basic line in SVG:
<svg viewBox="0 0 100 100">
<line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="2" />
</svg>
Let's break down the code:
- The <svg> element defines the SVG container, and the viewBox attribute sets the size of the container.
- The <line> element creates the line.
- The x1 and y1 attributes specify the coordinates of the starting point of the line.
- The x2 and y2 attributes specify the coordinates of the ending point of the line.
- The stroke attribute sets the color of the line.
- The stroke-width attribute sets the width of the line.
You can also add other attributes to the <line> element, such as stroke-dasharray to create a dashed line, or stroke-linecap to change the shape of the line ends.

A <line> element are used to draw a line. In SVG we are draw a line using two points. start point and end point . start point is pair of (x1-coordinate and y1-coordinates). similarly endpoint also have two coordinates (x2 & y2).
Syntax
<line x1="start-point-x-coordinate" y1="start-point-y-coordinate"
x1="end-point-x-coordinate" y1="end-point-y-coordinate">
</line>
For example make basic SVG line.

<svg height="200" width="200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<line x1="10" y1="130" x2="200" y2="30" stroke="green" stroke-width="5px" ></line>
</svg>
SVG stroke-linecap

<svg height="170" width="90"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<line x1="10" y1="130" x2="10" y2="30" stroke="salmon" stroke-width="12px" stroke-linecap="butt"></line>
<line x1="30" y1="130" x2="30" y2="30" stroke="#c79892" stroke-width="12px" stroke-linecap="square"></line>
<line x1="50" y1="130" x2="50" y2="30" stroke="darkgray" stroke-width="12px" stroke-linecap="round"></line>
</svg>
SVG Line animation
Change line color animation.

<svg height="200" width="200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<line x1="10" y1="30" x2="200" y2="130" stroke="green" stroke-width="5px" >
<animate attributeName="stroke"
values="green;blue;red;pink;orange;" begin="0s" dur="9s" repeatCount="indefinite"></animate>
</line>
</svg>
Move line animation

<svg height="160" width="200"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" >
<line stroke-dasharray='6 2' x1="10" y1="30" x2="200" y2="30"
stroke="#9c27b0" stroke-width="3px" >
<animate attributeName="x1"
from="30" to="200" begin="0s" dur="9s" repeatCount="indefinite"></animate>
</line>
<line x1="10" y1="30" stroke-dasharray='6 2' x2="200" y2="90" stroke="#3f51b58c" stroke-width="3px" >
<animate attributeName="x2"
from="200" to="10" begin="0s" dur="9s" repeatCount="indefinite"></animate>
<animate attributeName="x1"
from="30" to="200" begin="0s" dur="9s" repeatCount="indefinite"></animate>
</line>
<line stroke-dasharray='6 2' x1="10" y1="90" x2="200" y2="90" stroke="#9c27b0" stroke-width="3px" >
<animate attributeName="x2"
from="200" to="10" begin="0s" dur="9s" repeatCount="indefinite"></animate>
</line>
</svg>
Rotate line arround a circle

<svg width="150px" height="130px">
<!-- center of rotation -->
<circle cx="50" cy="50" fill="#ffeb3b" stroke="pink" r="40" stroke="blue" ></circle>
<circle cx="50" cy="50" r="3" stroke="blue" fill="blue"></circle>
<g>
<line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
<polygon fill="blue" points="90 50, 85 45, 85 55"></polygon>
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
begin="4s"
dur="10s"
repeatCount="indefinite"></animateTransform>
</g>
<g transform="rotate(45, 50, 50)">
<line stroke="blue" x1="50" y1="50" x2="90" y2="50"></line>
<polygon fill="red" points="90 50, 85 45, 85 55"></polygon>
<animateTransform
attributeName="transform"
type="rotate"
from="0 50 50"
to="360 50 50"
dur="8s"
repeatCount="indefinite"></animateTransform>
</g>
</svg>
Please share your knowledge to improve code and content standard. Also submit your doubts, and test case. We improve by your feedback. We will try to resolve your query as soon as possible.
New Comment