JavaScript和SVG:如何增加onClick事件的可点击区域？
JavaScript和SVG:如何增加onClick事件的可点击区域？
提问于 2012-02-03 01:55:29
我的脚本在屏幕上以3的笔划宽度绘制线条。线条的大小(在视觉上)是理想的，但它们不是很容易点击。
举个粗略的例子：
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>
有没有一种简单的方法来增加每一条线周围的面积，使它们更容易点击？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-02-03 02:05:28
对于每一条线，尝试在其上面绘制一条具有较大笔划宽度的透明线，并在其上设置onclick。
Stack Overflow用户
发布于 2012-02-03 17:37:18
以上答案的一个变体。为了获得一个很酷的选择效果，将每条细线和透明线组合在一组中，细线在顶部。将onclick设置为组，然后在onclick中设置粗线的透明度动画。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9117364
复制相关文章
相似问题
腾讯云开发者
