SVG connect two points with a line

svg line draw jquery-svg
ashu picture ashu · Jun 24, 2013 · Viewed 12.8k times · Source

Is there any way to connect two point using a line in SVG .I am having the following to create point in SVG.

<?xml version="1.0" standalone="no"?>

<svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Points -->

  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

I need to draw a line between points using jquery functions.

Answer

Peter Collingridge picture Peter Collingridge · Jun 24, 2013

You can use a line:

<line x1="10" y1="10" x2="90" y2="90" stroke-width="1" stroke="black"/>

Or a path:

<path d="M10 10 90 90" stroke-width="1" stroke="black"/>

Why do you need jQuery?

Related questions

How to make an SVG "line" with a border around it?

I have a little svg widget whose purpose is to display a list of angles (see image). Right now, the angles are line elements, which only have a stroke and no fill. But now I'd like to have an "inside …

Read More
Draw a Connection Line in RaphaelJS

How would I go about drawing a connection line in Raphael where the mousedown initiates the starting point of the line, the mousemove moves the end point without moving the start point and the mouseup leaves it as it is?

Read More
Linear gradient across SVG line

I am wondering about possibility to make linearGradient across (from top to bottom) the line, as opposed to the example below where the gradient goes along (from left to right) the line. <svg xmlns="http://www.w3.org/2000/svg" …

Read More