JavaScript和SVG:如何增加onClick事件的可点击区域？

Question

JavaScript和SVG:如何增加onClick事件的可点击区域？

ren*_*sis 8 javascript user-interface svg

我的脚本在屏幕上以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>

Run Code Online (Sandbox Code Playgroud)

有没有一种简单的方法来增加每条线周围的区域,使它们更容易点击？

Answer 1

Rya*_*n P 10

对于每一行,尝试在其上方绘制一条具有较大笔划宽度的透明线,并在其上设置onclick.

您可能希望将click事件侦听器添加到示例中具有id = buffer的根或组,并查看事件的目标,以确定单击了哪一行.这样,您只需要一个事件侦听器,而不是每个元素上的一个事件侦听器.哦,当在html中包含svg内联时,不需要`<？xml ...？>`部分,它将被忽略. (4认同)

归档时间：	13 年，9 月前
查看次数：	3800 次
最近记录：	13 年，9 月前