जावास्क्रिप्ट और एसवीजी: आप ऑनक्लिक ईवेंट के लिए क्लिक करने योग्य क्षेत्र को कैसे बढ़ाते हैं?

मेरी स्क्रिप्ट स्क्रीन पर लाइनों को 3 की स्ट्रोक-चौड़ाई पर खींचती है। रेखाओं का आकार आदर्श (दृश्यमान) है लेकिन वे क्लिक करना बहुत आसान नहीं हैं।जावास्क्रिप्ट और एसवीजी: आप ऑनक्लिक ईवेंट के लिए क्लिक करने योग्य क्षेत्र को कैसे बढ़ाते हैं?

एक मोटा उदाहरण के रूप में:

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

वहाँ उन्हें आसानी से क्लिक करने के लिए बनाने के लिए पंक्तियों में से प्रत्येक के आसपास के क्षेत्र को बढ़ाने के लिए एक आसान तरीका है?

स्रोत

2012-02-02 renosis

प्रत्येक पंक्ति के लिए, एक बड़ी स्ट्रोक चौड़ाई के साथ इसके ऊपर एक पारदर्शी रेखा खींचने का प्रयास करें, और उस पर क्लिक करें।

स्रोत

2012-02-02 18:05:27

ठीक है, धन्यवाद। यह काम करता है और ऐसा लगता है कि यह सबसे अच्छा तरीका है। – renosis

हो सकता है कि आप क्लिक इवेंट श्रोता को रूट या समूह में आईडी = बफर के साथ अपने उदाहरण में जोड़ना चाहें, और उस ईवेंट के लक्ष्य को देखें, जिसे आप समझते हैं कि कौन सी लाइन क्लिक की गई थी। इस तरह आपको प्रत्येक तत्व पर एक के बजाय केवल एक ईवेंट श्रोता की आवश्यकता होती है। ओह, और ' 'HTML में svg इनलाइन समेत भाग आवश्यक नहीं है, इसे अनदेखा कर दिया जाएगा। –

आह ठंडा, धन्यवाद एरिक! – renosis

उपर्युक्त उत्तर में एक भिन्नता। एक शांत चयन प्रभाव समूह के लिए शीर्ष पर पतली रेखा वाले समूह में प्रत्येक पतली रेखा और पारदर्शी रेखा कॉम्बो। समूह पर क्लिक करें और फिर अपने ऑनक्लिक में मोटी रेखा की पारदर्शिता को एनिमेट करें।

स्रोत

2012-02-03 09:37:17 David

हां, मैं समग्र मैकेनिक्स को समझने के बाद ऑनक्लिक के साथ कुछ चमकदार करने पर विचार कर रहा था ... एक अच्छा विचार की तरह लगता है। पारितोषिक के लिए धन्यवाद! – renosis

जावास्क्रिप्ट और एसवीजी: आप ऑनक्लिक ईवेंट के लिए क्लिक करने योग्य क्षेत्र को कैसे बढ़ाते हैं?

उत्तर

संबंधित मुद्दे