Comment calculer la distance entre deux points en SVG?

Question

Dans le graphique à secteurs, chaque fois qu'un segment est cliqué, il doit être légèrement déplacé comme dans l'image. This is the image

Comment cela peut-il être fait? Ce que je fais, c'est créer un arg virtuel avec un rayon supérieur de 10 à celui d'origine. Ensuite, pour trouver la distance entre ceux-ci.

Après la distance est calculée utiliser le X, la valeur Y pour la traduire (X, Y) d'attribut pour déplacer la tranche d'arc à point spécifié

Answer 1

Voici un exemple:

<?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>