SVG 路径在 Leaflet 地图的交叉点上跳跃

Question

如果有一个 SVG 路径，那么在交叉点上绘制跳跃的最简单的 SVG 方法是什么，以使相互交叉的路径对用户体验更友好？与其他路径的交叉点，以及路径本身的交叉点。

类似这样的：

或

计算交叉点并分别绘制每个路径段是一种选择，但我担心影响性能，因为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>