I have a problem for which made simplified code for express it. In few words I need to build code in Javascript for painting connected SVG lines. The simple example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<line x1="50" y1="50" x2="200" y2="50" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="100" y1="100" x2="400" y2="100" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="300" y1="300" x2="200" y2="300" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="100" y1="50" x2="100" y2="400" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="300" y1="100" x2="300" y2="300" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<line x1="200" y1="300" x2="200" y2="200" stroke="steelblue" stroke-width="20" onclick="fillWall(evt)" />
<script type="text/javascript">
<![CDATA[
function fillWall(evt) {
var tgt=evt.target;
tgt.setAttributeNS(null, "stroke", "firebrick");
}
]]>
</script>
</svg>
This is labyrinth of few walls when you click on some it changes color, so I need to do it with one click to paint all connected, no matter on which wall click is applied. In full sized scale there are almost thousand of these walls, and some are connected, some aren't. I tried to learn recursive functions, but easily exceeded stack size.
Please help, I'll appreciate that a huge.