Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://stackoverflow.com/questions/35560989/javascript-how-to-determine-a-svg-path-draw-direction below:

Javascript: How to determine a SVG path draw direction?

I'm trying to determine a SVG path draw orientation. I'm working on something like this

var length = path.getTotalLength();
var horizontal = path.getPointAtLength(length/4).x - path.getPointAtLength(0).x;
var vertical = path.getPointAtLength(length/4).y - path.getPointAtLength(0).y;

Then do some comparisons with these values horizontal > 0 and vertical > 0, but this above idea isn't, in my mind, very successful.

My question is: is there anything I can use to determine the draw direction or perhaps some built in SVG methods/options?

Thank you

asked Feb 22, 2016 at 18:20

4,47944 gold badges3636 silver badges5151 bronze badges

Use Math.atan2(yDiff, xDiff) to get the angle between the two reference points. Two visually identical shapes that go in opposite directions will have an angle difference of pi.

Be aware of the edge case where your two reference points are unluckily the same point. Not likely, especially given rounding errors, but keep it in mind in case you need this to be rock solid.

var paths = document.getElementsByTagName("path");
for (var pathNum = 0; pathNum < paths.length; pathNum += 1) {
  var path = paths[pathNum];
  var message = document.createElement('p');
  message.innerHTML = "path #" + pathNum + ": angle = " + pathDir(path);
  document.body.appendChild(message);
};

function pathDir(path) {
  var length = path.getTotalLength();
  var pt14 = path.getPointAtLength(1/4 * length);
  var pt34 = path.getPointAtLength(3/4 * length);
  var angle = Math.atan2(pt14.y - pt34.y, pt14.x - pt34.x);
  return angle;
}

<svg width="300" height="80">
  <g fill="none" stroke="black" stroke-width="4">
    <path d="M 10,10 C 90,10 -30,60  50,60Z"/>
    <path d="M110,10 C190,10  70,60 150,60Z"/>
    <path d="M250,60 C170,60 290,10 210,10Z"/>
  </g>
</svg>
<div></div>

answered Feb 22, 2016 at 20:54

12.5k1010 gold badges5656 silver badges7474 bronze badges

Start asking to get answers

Find the answer to your question by asking.

Explore related questions

See similar questions with these tags.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4