html - 如何制作自定义 SVG 路径？

Question

我正在使用这段代码制作 flex 的 SVG 路径。

const bezierWeight = 0.6;
var boxPath = document.getElementById("boxPath_"+edge.id);
var x1 = edge.x1;
var y1 = edge.y1;
var x4 = edge.x4;
var y4 = edge.y4;
var dx = (x4 - x1) * bezierWeight;
var x2 = x1 - dx;
var x3 = x4 + dx;
var boxData = `M${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
boxPath.setAttribute("d", boxData);

x1,y1 和 x4,y4 是我想要 SVG 路径的两点。这给了我这个。

但我想要这样的东西。

我该怎么做？

Answer 1

getCubicBezierPath 完全满足您的需求:

const from = {x: 20, y: 20};
const to = {x: 150, y: 100};

const getCubicBezierPath = (p1, p2) => {
  const midY = (p1.y + p2.y) / 2;
    return `M ${p1.x},${p1.y} 
    C ${p1.x},${midY} ${p2.x},${midY} ${p2.x},${p2.y}`;
};

const svg = d3.select('svg');
svg.append('circle')
    .attr('cx', from.x) 
  .attr('cy', from.y)
  .attr('r', 3)
  .style('fill', 'red')
  
svg.append('circle')
    .attr('cx', to.x)   
  .attr('cy', to.y)
  .attr('r', 3)
  .style('fill', 'red')  
  
svg.append('path')
    .attr('d', getCubicBezierPath(from, to))
  .style('stroke', 'blue')  
  .style('fill', 'none')

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="200" height="150">
</svg>