Как рассчитать расстояние между двумя точками в SVG?

Question

В круговой диаграмме при каждом щелчке на фрагменте ее нужно немного перемещать, как на изображении. This is the image

Как это можно сделать? Я делаю это, создаю виртуальный arg с радиусом 10 выше исходного. Затем, чтобы узнать расстояние между ними.

После того, как расстояние вычисляется с помощью X, значение Y на перевод (X, Y) атрибут, чтобы переместить кусок дуги к заданной точке

Answer 1

Вот пример:

<?xml version="1.0" ?> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" width="400" height="400" version="1.0"> 
 
    <g transform="translate(200 200)"> 
 
     <circle cx="0" cy="0" r="150" stroke="#000" fill="none" /> 
 
     <path d="M0,-150 Q0,0 106.066,-106.066" fill="none" stroke="red" stroke-width="3" /> 
 
     <path d="M0,-150 Q0,0 106.066,106.066" fill="none" stroke="red" stroke-width="3" /> 
 
     <path d="M0,-150 Q0,0 -106.066,106.066" fill="none" stroke="red" stroke-width="3" /> 
 
     <path d="M0,-150 Q0,0 -106.066,-106.066" fill="none" stroke="red" stroke-width="3" /> 
 
    </g> 
 
</svg>