SVG Line

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