JavaScript i SVG: jak zwiększyć obszar klikalny dla zdarzenia onClick?

Mój skrypt rysuje linie na ekranie o szerokości obrysu równej 3. Wielkości linii są idealne (wizualnie), ale nie są łatwe do kliknięcia.JavaScript i SVG: jak zwiększyć obszar klikalny dla zdarzenia onClick?

Jako szorstkiej przykład:

<html> 
<head> 
<script> 
function selectStrand(evt) { 
    current_id = evt.target.getAttributeNS(null, "id"); 

    document.getElementById('main').innerHTML = current_id; 
} 
</script> 
</head> 

<body> 
Selected line: <span id="main"></span> 

<?xml version="1.0"?> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1000 1000"> 
    <g id="buffer" transform="translate(10,0)"> 
     <line id="blue-blue" x1="50" y1="50" x2="500" y2="50" style="stroke:blue; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-orange" x1="50" y1="70" x2="500" y2="70" style="stroke:orange; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-green" x1="50" y1="90" x2="500" y2="90" style="stroke:green; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-brown" x1="50" y1="110" x2="500" y2="110" style="stroke:brown; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-grey" x1="50" y1="130" x2="500" y2="130" style="stroke:grey; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-khaki" x1="50" y1="150" x2="500" y2="150" style="stroke:khaki; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-red" x1="50" y1="170" x2="500" y2="170" style="stroke:red; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-black" x1="50" y1="190" x2="500" y2="190" style="stroke:black; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-yellow" x1="50" y1="210" x2="500" y2="210" style="stroke:yellow; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-purple" x1="50" y1="230" x2="500" y2="230" style="stroke:purple; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-pink" x1="50" y1="250" x2="500" y2="250" style="stroke:pink; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
     <line id="blue-cyan" x1="50" y1="270" x2="500" y2="270" style="stroke:cyan; stroke-width: 4;" stroke-linecap="round" onclick="selectStrand(evt)"/> 
    </g> 
    </g> 
</svg> 

</body> 
</html>

Czy istnieje prosty sposób na zwiększenie obszaru wokół każdej z linii, aby ułatwić ich do kliknięcia?

Źródło

2012-02-02 renosis

Dla każdej linii spróbuj narysować na niej przezroczystą linię o większej szerokości obrysu, a następnie ustaw na niej kliknięcie.

Źródło

2012-02-02 18:05:27

Dobra, dzięki. To działa i wygląda na to, że jest to najlepszy sposób. – renosis

Możesz chcieć dodać detektor zdarzeń kliknięcia do katalogu głównego lub grupy o identyfikatorze = bufor w twoim przykładzie i spojrzeć na cel zdarzenia, które uzyskasz, aby dowiedzieć się, która linia została kliknięta. W ten sposób potrzebujesz tylko jednego detektora zdarzeń, zamiast jednego na każdym elemencie. Och, a część '' nie jest konieczna, gdy dodaje się wiersz svg w html, zostanie zignorowany. –

Ah cool, dzięki Erik! – renosis

Zmiana powyższej odpowiedzi. Dla fajnej grupy efektów wyboru każda cienka linia i przezroczyste połączenie linii w grupie z cienką linią na górze. Ustaw opcję onclick na grupę, a następnie animuj przezroczystość grubej linii w swoim onClick.

Źródło

2012-02-03 09:37:17 David

Ya, zastanawiałem się nad zrobieniem czegoś krzykliwego z onClick, kiedy zrozumiałem, że ogólna mechanika ... brzmi jak dobry pomysł. Dzięki za wskazówkę! – renosis

JavaScript i SVG: jak zwiększyć obszar klikalny dla zdarzenia onClick?

Odpowiedz

Powiązane problemy