CODEWITHSUNDEEP
javascriptcsshtmlsvg
Cabbage
Cabbage

Reputation: 27

How can I draw a line using SVG?

How can I draw a line connecting 2 images using SVG?. For example I want to draw a line to connect $1 and $2 (assuming $1 and $2 are images):

$1
    $2

And is Javascript required?

Thanks!

Upvotes: 1

Views: 440

Answers (3)

Wajahat Hashmi
Wajahat Hashmi

Reputation: 145

You can Draw a line between the two images like

<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$1"/>
<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  Sorry, your browser does not support inline SVG.
</svg>
<img scr="http://www.belutics.com/wp-content/uploads/2016/01/sample-placeholder.png" alt="$2"/>

and if you want to link line with images? try to get it done with CSS relative property you can find help here

Upvotes: 0

Siddhesh Kulkarni
Siddhesh Kulkarni

Reputation: 358

Try this :

<svg height="210" width="500">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

For more SVG tag info here
Note that SVG tag may not work properly on IE, Edge and Firefox
Also you can use jsPlumb library Here

Upvotes: 1

andreas
andreas

Reputation: 16936

You can easily draw a line with SVG and position it between your images:

<img src="http://placehold.it/100x100">
<svg width="100" height="100" viewPort="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="20" x2="100" y2="80" stroke-width="2" stroke="black" />
</svg>
<img src="http://placehold.it/100x100">

Upvotes: 1

Related Questions