svg path

by tnhu

HTML

<!-- http://blogs.sitepointstatic.com/examples/tech/svg-curves/cubic-curve.html -->

<div id="svg" class="C">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 499" preserveAspectRatio="xMidYMid meet">
	<title>SVG curve</title>
	<desc>example curves in SVG</desc>
	<g id="main">
		<circle id="p1" cx="21" cy="21" r="16"/>
		<circle id="p2" cx="201" cy="480" r="16"/>
		
		<circle id="c1" cx="197" cy="21" r="8"/>
		<circle id="c2" cx="9" cy="482" r="8"/>
		
		<line id="l1" x1="21" y1="21" x2="197" y2="21"/>
		<line id="l2" x1="201" y1="480" x2="9" y2="482"/>
	
		<path id="curve" d="M21,21 C197,21 9,482 201,480" class=""/>
	</g>
</svg>
</div>

CSS

div {
  display: inline-block;
  width: 500px;
  height: 500px;
  margin: 0 10px 10px 0;
  background-color: #eee;
}

path {
  stroke-width: 4;
  stroke: #000;
  stroke-linecap: round;
  fill: none;
}

line {
  stroke-width: 1;
  stroke: #999;
  stroke-linecap: round;
  stroke-dasharray: 5,3;
}

circle {
  stroke-width: 2;
  stroke: #c00;
  fill: #fff;
}

JavaScript

function makeDraggable(evt) {
  var svg = evt.target;
  svg.addEventListener('mousedown', startDrag);
  svg.addEventListener('mousemove', drag);
  svg.addEventListener('mouseup', endDrag);
  svg.addEventListener('mouseleave', endDrag);
  function startDrag(evt) {
  }
  function drag(evt) {
  }
  function endDrag(evt) {
  }
}