我有4个点。全部点击后，我希望隐藏的线条变得可见。当我点击一个点时，线条出现，我也无法显示所有4条线。如果有任何其他错误，我会非常感谢批评。先感谢您。
<doctype html>
<html>
<head>
<title>game01</title>
<style>
body {
background-color: #00FFFF;
}
line {
stroke: blue;
visibility: hidden;
}
</style>
</head>
<body>
<svg width="100%" height="100%">
<!-- <g transform="rotate(90 480 480)">-->
<circle id="circle0" cx="10" cy="10" r="5" onclick="dotClick(0);"></circle>
<circle id="circle1" cx="10" cy="40" r="5" onclick="dotClick(1);"></circle>
<line id="line1" x1="10" y1="10" x2="10" y2="40"></line><!--left line-->
<circle id="circle3" cx="30" cy="10" r="5" onclick="dotClick(2);"></circle>
<circle id="circle4" cx="30" cy="40" r="5" onclick="dotClick(3);"></circle>
<line id="line2" x1="30" y1="10" x2="30" y2="40"></line><!--right line-->
<line id="line3" x1="10" y1="10" x2="30" y2="10"></line><!--top line-->
<line id="line4" x1="10" y1="40" x2="30" y2="40"></line><!--bottom line-->
<!--</g>-->
</svg>
</body>
<script>
function dotClick(id) {
if (id > 0) {
document.getElementById("line" + id).style.visibility = "visible";
}
}
</script>
</html>