Javascript 如何更改svg图像中不同矩形的颜色，具体取决于单击的矩形？

第一个帖子在这里。我相信有一个简单的解决办法，但我真的很努力在这个问题上

我试图在单击时更新svg中特定矩形的颜色，但在更改指定矩形的颜色时遇到问题 e、 g.我有一张房间地图，点击一个房间会改变房间的颜色

我使用illustrator生成了svg图像

HTML:

.st0{
填充：无；
行程：#000000；
行程限制：10；
}
.st1{
字体系列：“万维网”；
}
.st2{
字号：19.1885px；
}
紫罗兰（4）
Cacoa（4）
藤蔓（6）
橄榄（4）
棉花（10）
玫瑰湾（10）
丁香（4）
兰花（4）
莲花（6）
竹子（6）
云杉（4）
山核桃（4）

JavaScript:

<script type="text/javascript">
              function changeColour() {                      
                   var a = document.getElementById("FloorPlan");                       
                   var svgDoc = a.getElementsByTagName('rect');


                   var svgItem = //notsure how to get the clicked rectangle here

                   svgItem.setAttribute("fill", "lime");
               }
        </script>           

函数changeColour（）{
var a=document.getElementById（“FloorPlan”）；
var svgDoc=a.getElementsByTagName（'rect'）；
var svgItem=//不确定如何在此处获取单击的矩形
setAttribute（“填充”、“石灰”）；
}

您可以通过为

：active

伪类添加样式来使用CSS实现这一点：

#r1:活动{fill:#f00；}
#r2：活动{fill:#f80；}
#r3：活动{fill:#ee0；}
#r4:活动{fill:#3c0；}
#r5:活动{fill:#0bb；}
#r6:活动{fill:#07e；}
#r7:活动{fill:#00d；}
#r8：活动{fill:#60a；}

您是否尝试将单击事件绑定到每个rect？类似于$rect.click（function（）{/*更改$whateverItem*/}的颜色）我如何进行修改，以便在选择其他项目后映射项目保留其颜色？@danielwhetam只需删除行

$（'.map item'）.attr（'class'，'map-item'）

@DanielWhettam实际上，如果将

单击

替换为

鼠标向下

，jQuery示例可能会工作得更好。

<script type="text/javascript">
              function changeColour() {                      
                   var a = document.getElementById("FloorPlan");                       
                   var svgDoc = a.getElementsByTagName('rect');


                   var svgItem = //notsure how to get the clicked rectangle here

                   svgItem.setAttribute("fill", "lime");
               }
        </script>