如何在 "mousedown" 事件的 svg 中获取先前选择的元素？

Question

我正在尝试创建具有 "mousedown" 事件的节点（svg 中的矩形）。当我点击一个节点时，它们都有我在网页其他地方打印出来的文本内容。

但是您无法直观地看到选择了哪个节点。当我点击一个矩形时，我设法改变了描边的颜色，但是当我点击另一个矩形时，之前选择的矩形将具有相同的颜色。

我正在使用此代码：

for(var i = 0; i < g_items.length; i++){
    g_items[i].addEventListener("mousedown", // OR click
        function(evt){
            evt.target.setAttribute("style", "#ffffff");

            generate_html(evt.target.parentNode.textContent);

    });

请注意，我实际上并没有像这样使用 "setAttribute" 函数，因为实际代码有很多垃圾要在这里展示。

我也试过 "evt.timeStamp" 但我无法让它工作。

基本上就是我想要的：

单击节点会将矩形的描边颜色更改为白色
单击另一个节点会将先前选择的节点描边颜色替换回黑色

Answer 1

所以最终的解决方案是@Calvin Belden。谢谢！

for(var i = 0; i < g_items.length; i++){
    g_items[i].addEventListener("mousedown", // OR click
        function(evt){
            for(var j = 0; j < g_items.length; j++){

                var style_split = g_items[j].firstElementChild.getAttribute("style").split(/stroke:#ffffff;|stroke:#000000;/);

                g_items[j].firstElementChild.setAttribute("style", style_split[0] + "stroke:#000000;" + style_split[1]);    
            }

            var style_split = evt.target.getAttribute("style").split(/stroke:#ffffff;|stroke:#000000;/);

            evt.target.setAttribute("style", style_split[0] + "stroke:#ffffff;" + style_split[1]);

            generate_html(evt.target.parentNode.textContent);
    });
}

另一个问题是我不能完全使用 css 来设置值，因为我从 Inkscape 加载了一个 SVG，它为我不能只覆盖其中的一个元素的每个元素创建了一个长样式属性风格。

这是属性：

"opacity:1;fill:#a7a7a7;fill-opacity:1;stroke:#000000;stroke-width:5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

如何在 "mousedown" 事件的 svg 中获取先前选择的元素？

how to get previously selected element in an svg on "mousedown" event?

javascript

svg

mousedown