Ich benutze die JavaScript-Bibliothek D3, um ein SVG-Diagramm zu erstellen und ihnen Mausereignisse zuzuweisen. Das SVG-Diagramm kann komplex sein und aus vielen beliebigen Pfadelementen bestehen. Ich habe gekämpft, um einen Weg zu finden, um alle in der Nähe befindlichen Elemente bei einem mouseover-Ereignis zu bestimmen. Wenn sich zum Beispiel der Mauszeiger über das Diagramm bewegt, kann ich alle Komponenten-SVG-Elemente innerhalb eines Radius von N Pixeln vom Cursor bestimmen.
Ich bin völlig ratlos, wie ich das angehen soll. Ich bin nicht einmal sicher, ob es eine API gibt, mit der ich feststellen kann, ob ein SVG-Element innerhalb einer Begrenzungsregion ist?
Irgendwelche Hinweise darauf, wie man das angehen würde, würden sehr geschätzt.
Vorwort: @ Duopixels Kommentar zu Ihrem ursprünglichen Post ist großartig - ich wusste nicht, dass diese Methode existiert. Es scheint jedoch, dass es nur eine rechteckige Region pro MSDN-Dokumentation unterstützt, während es scheint, einen Kreis um die Maus intuitiver zu haben.
Ein paar andere Techniken:
Verwenden Sie einen unsichtbaren, dicken Strich, der Ihr Element "erweitert", wenn Sie den Strich nicht zum Stylen verwenden, oder zeichnen Sie eine transparente Linie / Form über dem Element, die etwas größer ist. Hören Sie sich das Ereignis 'click' für diese Elemente an.
Machen Sie einen paarweisen Vergleich jedes Elements mit dem Klickradius der Maus. Ich habe hier ein Beispiel gegeben: Ссылка . Ich habe Kreise nur implementiert, weil sie einfach waren - Sie müssten die Geometrie für Rechtecke hinzufügen.
Am Ende habe ich die von DuoPixel vorgeschlagene Methode in SVGEdit verwendet. Es verwendet eine andere SVGEdit-Methode, die in svgcanvas.js definiert ist, so dass es nicht wirklich als eigenständige Version gedacht ist. Hier ist ein funktionierender Link zur DuoPixel-Methode, die in den Kommentaren vorgeschlagen wird: Ссылка
Mit der spezifischen Implementierung für den Fall, dass sich der Link ändert:
%Vor%