SVG path hops on intersection in Leaflet map

Question

Having a SVG path, what would be the easiest SVG way to draw hops on intersections, to make paths crossing each other more UX friendly? Both intersections with other paths, and within the path itself.

Something like this:

or

Computing intersections and drawing each path segment separately is an option, but I'm afraid about impact on performance, because the SVG path is drawn internally by Leaflet polyline, and there can be many polylines on the map.

enxaneta enxaneta · Accepted Answer · 2018-10-31T09:53:16

In the first SVG canvas I'm using an other wider white line to mark the intersection. In the second I'm using javascript to calculate the intersection and I'm drawing a white circle to mark it. The formula for the intersecting lines is from Intersection point of two line segments in 2 dimensions - written by Paul Bourke

function Intersect(p1,p2,p3,p4){
  var denominator = (p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y);
  var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x))/denominator;
  var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x))/denominator;
  var x = p1.x + ua*(p2.x - p1.x);
  var y = p1.y + ua*(p2.y - p1.y);
  if(ua > 0 && ua < 1 && ub > 0  && ub < 1){
  return {x:x,y:y};
  }else{return false;}
}

let p1={x:50,y:90}
let p2={x:50,y:10}
let p3={x:10,y:50}
let p4={x:90,y:50}

let _int = Intersect(p1,p2,p3,p4);

int.setAttributeNS(null,"cx", _int.x);
int.setAttributeNS(null,"cy", _int.y);

svg{border:1px solid; width:60vh}

line{stroke-linecap:round;}
.white{stroke:#fff;stroke-width:6}
.black{stroke:#000;stroke-width:2}

<svg viewBox="0 0 100 100">
  <defs>
  <line id="l1" x2="50" y2="10" x1="50" y1="90" />
  <line id="l2" x1="50" y1="10" x2="10" y2="50" />
  <line id="l3" x1="10" y1="50" x2="90" y2="50" />
  </defs>

 
<use xlink:href="#l1" class="black" /> 
  
<use xlink:href="#l3" class="white" /> 
  
<use xlink:href="#l2" class="black" />
<use xlink:href="#l3" class="black" /> 
  
  
</svg>

<svg viewBox="0 0 100 100">

 
<use xlink:href="#l1" class="black" /> 
<use xlink:href="#l2" class="black" />
  
<circle id="int" cx="0" cy="0" r="3" fill="white" />
  
<use xlink:href="#l3" class="black" /> 
  
  
</svg>

SVG path hops on intersection in Leaflet map

1 Answers