0

I currently have a grid of nine 40 by 40px blue squares, set up as an SVG using HTML:

<svg version="1.1"
   baseProfile="full"
   xmlns="http://www.w3.org/2000/svg"
   width="200" height="200" >
<rect id="topLeft" x="20" y="20" width="40" height="40" fill="blue"/>
<rect id="topCenter" x="80" y="20" width="40" height="40" fill="blue"/>
<rect id="topRight" x="140" y="20" width="40" height="40" fill="blue"/>

<rect id="midLeft" x="20" y="80" width="40" height="40" fill="blue"/>
<rect id="midCenter" x="80" y="80" width="40" height="40" fill="blue"/>
<rect id="midRight" x="140" y="80" width="40" height="40" fill="blue"/>

<rect id="bottomLeft" x="20" y="140" width="40" height="40" fill="blue"/>
<rect id="bottomCenter" x="80" y="140" width="40" height="40" fill="blue"/>
<rect id="bottomRight" x="140" y="140" width="40" height="40" fill="blue"/>

</svg>

In my JavaScript file, I set each square in the grid to its own variable, and put all those variables into an array:

var topLeft = document.getElementById("topLeft");
var topCenter = document.getElementById("topCenter");
var topRight = document.getElementById("topRight");
var midLeft = document.getElementById("midLeft");
var midCenter = document.getElementById("midCenter");
var midRight = document.getElementById("midRight");
var bottomLeft = document.getElementById("bottomLeft");
var bottomCenter = document.getElementById("bottomCenter");
var bottomRight = document.getElementById("bottomRight");

var squares = [topLeft,topCenter,topRight,midLeft,midCenter,midRight,bottomLeft,bottomCenter,bottomRight]

I also have another 40 by 40px image.svg file. When the user clicks one of the nine blue squares, I want that square to be replaced by this file, and then for that square to be removed from the clickable options until all squares have been clicked and replaced by the other image, at which point a pop up will occur. So far I have something like this:

while (squares.length > 0){
    for (square in squares){
        square.onclick = function(){
            // replace square with image.svg;
            availableSquares.splice(square,1);
    alert("You clicked them all!")
        }
    }
}

I have looked here and here, but I'm new to SVG and interactive events, so neither were very helpful to me.

Should each rectangle be its own SVG, or is one SVG with different element tags (as I have it) ok?

Should I create the replacement image as an element like this?

var image = document.createElement("svg")
Community
  • 1
  • 1
wugology
  • 193
  • 1
  • 4
  • 13
  • at least as a programming note, it's far more efficient to not use nine separate variables, but simply use the result of `document.querySelectorAll("svg rect")`, since you know `...[0]` is top left, `...[5]` is the center, and `...[8]` is the bottom right anyway – Mike 'Pomax' Kamermans Aug 20 '14 at 02:26
  • Thanks, I figured there was a more streamlined way to do that. Any ideas on replacing the SVG? – wugology Aug 21 '14 at 20:00
  • 1
    you can use the regular DOM API to do something like `element.parentNode.replaceChild(, element)` to replace the `rect` element with an `image` element. – Mike 'Pomax' Kamermans Aug 21 '14 at 20:35

0 Answers0