Block arrow using SVG

debugcn Published at Dev

kaytrance

I need to draw nice stroked block arrow using SVG from one point (x0,y0) to another (x1,y1), like the one on the picture.

The only way I can imagine is to use a line (two lines basically to simulate stroke and fill) with marker, but it looks kind of ugly due to overlaping strokes.

Ideally both line and marker should be filled with the same color and should have the same stroke color, and overall arrow width can be fixed (but if I could parametrize that as well it would be cool). Basically it should look the same as on picture provided and should be able to be drawn by just providing coordinates of two points. Is it even possible?

Paul LeBeau

I was bored, so here you go. I have written a function to generate a path of the right shape.

You just need to give it the "from" and "to" coords, the line width, arrowhead width, and arrowhead length.

Enjoy!

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;

  // The difference between the line width and the arrow width
  var dW = arrowheadWidth - lineWidth;
  // The angle of the line
  var angle = Math.atan2(dy, dx) * 180 / Math.PI;
  // Generate a path describing the arrow. For simplicity we define it as a
  // horizontal line of the right length, and starting at 0,0. Then we rotate
  // and move it into place with a transform attribute.
  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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-07-24

Comments

0 comments

From Dev

Related Related

Article

Block arrow using SVG

Block arrow using SVG

using arrow function into the return block of page.evaluate of puppeter script

using arrow function into the return block of page.evaluate of puppeter script

SVG Animate bouncing arrow

Unexpected block statement surrounding arrow body ESlint

Unexpected block statement surrounding arrow body

Arrow shape using FabricJS

create arrow using leafletjs

Arrow alignment using CSS

Using arrow keys in batch

SVG Polygon Arrow, thin line at top?

Create a SVG object with a arrow line Highcharts

Flipping SVG arrow and make it point right?

Inline-Block error when using batik on NVD3 svg

How to increment a date using Arrow?

Excluding the arrow pattern "->" using grep

Using arrow keys to navigate in a table

Implement Arrow ProgressBar using CSS

Implement Arrow ProgressBar using CSS

arrow is not showing up using :after

Printing an arrow head using stars

Navigate inputs using the arrow keys

Printing a circle using arrow symbols

No arrow on images when using bxslider

Rectangle Shape with Arrow using XML

using bash without arrow keys

arrow is not showing up using :after

Using 'as IDisposable' in a using block

Console Block all user input that isnt up/down arrow keys?

Using `super` within an arrow function within an arrow function within a method