Question

我目前有一个9个40 x 40px蓝色方块的网格，使用HTML设置为SVG：

<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>

在我的JavaScript文件中，我将网格中的每个方块设置为自己的变量，并将所有这些变量放入数组中：

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]

我还有另外40 x 40px的image.svg文件。当用户点击九个蓝色方块中的一个时，我希望该方块被该文件替换，然后从可点击选项中移除该方块，直到所有方块都被点击并被另一个图像替换，此时会弹出一个弹出窗口。到目前为止，我有这样的事情：

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!")
        }
    }
}

我看过here和here，但我是SVG和互动活动的新手，所以对我来说都不是很有帮助。

每个矩形应该是它自己的SVG，还是一个具有不同元素标签的SVG（就像我拥有的那样）好吗？

我应该将替换图像创建为这样的元素吗？

var image = document.createElement("svg")

单击时用外部图像替换SVG元素

0 个答案: