M
I've written a function to generate the right form.You just need to point out the coordinates of " up " and " up to " , the width of the line, the width of the arrow and the length of the arrow. var from = {x: 50, y: 250};
var to = {x: 250, y: 100};
var lineWidth = 30;
var arrowheadWidth = 60;
var arrowheadLength = 50;
var svg = document.getElementById("test");
drawArrow(svg, from, to, lineWidth, arrowheadWidth, arrowheadLength);
function drawArrow(svg, from, to, lineWidth, arrowheadWidth, arrowheadLength)
{
var dx = to.x - from.x;
var dy = to.y - from.y;
// Calculate the length of the line
var len = Math.sqrt(dx * dx + dy * dy);
if (len < arrowheadLength) return;
// Разница между шириной линии и шириной стрелки
var dW = arrowheadWidth - lineWidth;
// Угол наклона линии
var angle = Math.atan2(dy, dx) * 180 / Math.PI;
//Создайте путь, описывающий стрелку. Для простоты мы определяем это как
//горизонтальная линия длиной вправо, начиная с 0,0. Тогда мы поворачиваем
// и перемещаем его на место с атрибутом преобразования.
var d = ['M', 0, -lineWidth/2,
'h', len - arrowheadLength,
'v', -dW / 2,
'L', len, 0,
'L', len - arrowheadLength, arrowheadWidth / 2,
'v', -dW / 2,
'H', 0,
'Z' ];
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("d", d.join(' '));
path.setAttribute("transform", "translate("+from.x+","+from.y+") rotate("+angle+")");
path.setAttribute("class", "arrow-line");
svg.appendChild(path);
}.arrow-line {
fill: gold;
stroke: black;
stroke-width: 6;
}<svg id="test" width="300" height="300">
</svg> https://stackoverflow.com/a/41743835/7394871 @Paul LeBeau
