Изменить атрибут "d" path'а кривой линии

Question

Я пытаюсь изменить "d" атрибут всех линий в определенной SVG карте, чтобы сделать прямые линии изогнутыми.

d="M514 222L488 66"

Есть ли универсальный алгоритм для изменения любой прямой линии c помощью атрибута "d" (как в примере выше) и для получения в результате изогнутой линии?

_{Свободный перевод вопроса Change path “d” attribute to curve the line от участника @Free Lancer.}

Answer 1

Ниже, как я хотел бы сделать это: для кривой (quadratic Bézier curve Q) мне нужно вычислить положение контрольной точки.
В этом случае необходимо вычислить контрольную точку в середине линии на расстоянии R.

Пожалуйста, прочтите комментарии в коде, чтобы понять как это сделано.

// переменная для определения кривизны 
let R = 50;
// точки исходной линии
let linePoints = [
  {x:514,y:222},
  {x:488,y:66}
]
//длина линии
let length = thePath.getTotalLength();
//точка в середине линии
let point = thePath.getPointAtLength(length/2);
// вычислить угол линии
let dy = linePoints[1].y - linePoints[0].y;
let dx = linePoints[1].x - linePoints[0].x;
let angle = Math.atan2(dy,dx);


let cp = {//контрольная точка для Безье перпендикулярной линии к траектории
  x:point.x + R*Math.cos(angle + Math.PI/2),
  y:point.y + R*Math.sin(angle + Math.PI/2)
}

//новый d атрибут для  path
let d = `M${linePoints[0].x}, ${linePoints[0].y} Q${cp.x},${cp.y} ${linePoints[1].x}, ${linePoints[1].y}`;
//установка нового "d" fnhb,enf
thePath.setAttributeNS(null,"d",d)

svg {
  border: 1px solid;
  width: 100vh;
}
path {
  stroke: black;
  fill: none;
}

<svg viewBox = "300 0 400 300">
<path id="thePath" d="M514, 222L488, 66" />
</svg>

_{Свободный перевод ответа Change path “d” attribute to curve the line от участника @enxaneta.}

БЛОГ НА HUSL

Изменить атрибут "d" path'а кривой линии

Ответы (1 шт):