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