SVG.Line

by kzima

HTML

<div id="drawing"></div>

JavaScript

var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).move(100,100);

function arrow(angle = 0) {
	var nested = draw.group();
  var group = nested.group();
  var line = group.polyline([[0, 0], [100, 0]]).stroke({ color: '#f06', width: 10, linecap: 'round' });
  group.rect(10, 10).move(100,-5).fill("blue");
  group.rect(10, 10).move(-10,-5).fill("blue");
  const text  = group.text("123");
  /* text.path(line); */
  group.rotate(angle);
  return nested;
}

const arrow1 = arrow(45).move(100,100);
const arrow2 = arrow(90).move(200,100);

/* var line2 = draw.line(0, 0, 100, 100).move(120, 150);

line2.stroke({ color: '#f06', width: 10, linecap: 'round' });
var group = draw.group();
group.add(line);
group.add(line2);
group.rotate(45)
 */

/* group.move(100, 100); */