comment savoir si un point x ou y est sur le chemin svg

Question

J'ai un chemin svg et je veux savoir si ma souris est sur le chemin svg ou non, si c'est je veux changer le curseur en pointeur souris.

Cela aurait pu être facilement fait en ajoutant la propriété mouse hover sur le chemin et aussi avec Recognize point(x,y) is inside svg path or outside avec cette solution.

mais il y a une torsion, j'ai une autre couche transparente dessus, à cause de laquelle je ne peux pas avoir ces deux solutions.

maintenant je fais l'affichage de couche supérieure aucun et il fonctionne bien. mais à cause de cela mon pointeur de la souris et l'action que je fais comme déplacer un certain élément sur le mouvement de la souris est lent, donc je veux savoir s'il y a une autre meilleure façon sans rendre l'affichage égal à aucun.

s'il vous plaît trouver l'exemple de violon, je veux changer le curseur pour pointer quand son sur l'élément mypath et veut aussi que myline devrait bouger pendant que je déplace la souris sur le calque, je peux faire mais je remarqué sur Firefox, le mouvement de la ligne n'est pas lisse,

https://jsfiddle.net/shyam_bhiogade/9a7zuou2/6/

<svg width="400" height="400"> 
    <g> 
    <path id="mypath" d="M10 200 L200 90 L200 200" fill="transparent" stroke="black" stroke-width="5" /> 
    <rect class="interactiveArea" width="500" height="500" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0);opacity:0.2" /> 
    <line id="myline" x1="20" y1="0" x2="20" y2="400" stroke-width="2" stroke="black" /> 
    </g> 
</svg> 

Answer 1

J'ai utilisé la solution donnée à https://bl.ocks.org/mbostock/8027637, elle renvoie la distance du point x et y du chemin, si la distance est inférieur à 1px ou la largeur du trait, je considère que x et y point est sur le chemin.

function closestPoint(pathNode, point) { 
    var pathLength = pathNode.getTotalLength(), 
     precision = 8, 
     best, 
     bestLength, 
     bestDistance = Infinity; 

    // linear scan for coarse approximation 
    for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) { 
    if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) { 
     best = scan, bestLength = scanLength, bestDistance = scanDistance; 
    } 
    } 

    // binary search for precise estimate 
    precision /= 2; 
    while (precision > 0.5) { 
    var before, 
     after, 
     beforeLength, 
     afterLength, 
     beforeDistance, 
     afterDistance; 
    if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) { 
     best = before, bestLength = beforeLength, bestDistance = beforeDistance; 
    } else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) { 
     best = after, bestLength = afterLength, bestDistance = afterDistance; 
    } else { 
     precision /= 2; 
    } 
    } 

    best = [best.x, best.y]; 
    best.distance = Math.sqrt(bestDistance); 
    return best; 

    function distance2(p) { 
    var dx = p.x - point[0], 
     dy = p.y - point[1]; 
    return dx * dx + dy * dy; 
    } 
}