传单地图中相交处的SVG路径跳

Question

拥有SVG路径，最简单的SVG方式是在交叉路口上绘制跳数，以使彼此交叉的路径对UX更友好。两者都与其他路径相交，并且在路径本身之内。

类似这样的东西：

或

计算相交并分别绘制每个路径段是一种选择，但是我担心会影响性能，因为SVG路径是由Leaflet折线在内部绘制的，并且地图上可以有很多折线。

Answer 1

在第一个SVG画布中，我使用另一条较宽的白线标记交叉点。在第二个中，我使用JavaScript计算交点，并绘制了一个白色圆圈以标记它。相交线的公式来自Intersection point of two line segments in 2 dimensions-由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>