CODEWITHSUNDEEP
javascriptuser-interfacesvg
renosis
renosis

Reputation: 2722

JavaScript and SVG: how do you increase the clickable area for an onClick event?

My script draws lines on the screen at a stroke-width of 3. The size of lines are ideal (visually) but they aren't very easy to click.

As a rough example:

    function selectStrand(evt) {
        current_id = evt.target.getAttributeNS(null, "id");

        document.getElementById('main').innerHTML = current_id;
    }
    Selected line: <span id="main"></span>
                      
    <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>

Is there a simple way to increase the area around each of the lines to make them easier to click?

Upvotes: 10

Views: 5362

Answers (2)

David
David

Reputation: 1198

A variation on the above answer. For a cool selection effect group each thin line and transparent line combo in a group with the thin line on top. Set the onclick to the group and then animate the transparency of the thick line in your onclick.

Upvotes: 4

kitti
kitti

Reputation: 14834

For each line, try drawing a transparent line on top of it with a larger stroke width, and set the onclick on that.

Upvotes: 14

Related Questions