我的 svg 多边形填充在悬停时不会改变颜色

Question

我有一些 svg 多边形。当您将鼠标悬停在多边形上时，我想找到多边形 id 的一部分，然后更改所有在其 id 中具有该多边形 id 部分的多边形的填充颜色。但它不起作用。没有多边形填充正在改变。请问有人知道我做错了什么吗？

示例多边形：

 <polygon id="sandiego0528loss10" fill="#FFFFFF" points="401.821,418.967 392.331,409.824 397.398,404.561 406.871,414.021        "/>
 <polygon id="sandiego0528loss9" fill="#FFFFFF" points="391.122,398.292 386.347,403.142 392.317,409.632 397.398,404.561         "/>

jquery

 $( "polygon" ).hover(
      function() {
        if (this.id.length > 0){
            var test = this.id.match(/\d{4}/); //see what the date is
            if (test !== null ) {
                //first part of test will be the date                   
                var thisDate = test[0]; 
                var matchIndex = test["index"];
                var thisRow = this.id.substring(0, matchIndex+4);
                //get all polygons with this prefix and color them

                $('polygon[id^=thisRow]').attr('fill', '#ccc');
            }

        }
      }, function() {

      }
    );

Answer 1

改变

$('polygon[id^=thisRow]').attr('fill', '#ccc');

到

$('polygon[id^=' + thisRow + ']').attr('fill', '#ccc');

当前行搜索 ID 以字符串“thisRow”开头的元素。您需要搜索以变量thisRow 的值开头的ID。

这是一个示例fiddle，仅更改了那行 JS（为了便于查看，我稍微更改了 HTML）。

Answer 2

我能想到的原因有两个：

1) hover 事件冒泡，而不是 mouseenter 事件。这可能会导致问题，尤其是 svg/多边形元素。所以不妨试试。

2) 我对 SVG 元素的事件侦听器有问题，也许这与多边形相同。尝试将事件绑定到包含多边形的 div。

编辑：您似乎单独使用了<polygon> 元素。这行不通。它是 SVG 中的一个元素。您需要将事件侦听器附加到所述 SVG 并添加 <svg> 标签。阅读更多here。还要确保等到你的 DOM 准备好：

Javascript：

$(document).ready(function() {
    $( "svg" ).hover(function() {
        if (this.id.length > 0){
            var test = this.id.match(/\d{4}/); //see what the date is
            if (test !== null ) {
                //first part of test will be the date
                var thisDate = test[0];
                var matchIndex = test["index"];
                var thisRow = this.id.substring(0, matchIndex+4);
                //get all polygons with this prefix and color them
                $('svg[id^=thisRow] polygon').attr('fill', '#ccc');
            }
        }
    });
});

HTML：

<svg id="sandiego0528loss10">
    <polygon fill="#FFFFFF" points="401.821,418.967 392.331,409.824 397.398,404.561 406.871,414.021        "/>
</svg>

<svg id="sandiego0528loss9">
    <polygon fill="#FFFFFF" points="391.122,398.292 386.347,403.142 392.317,409.632 397.398,404.561         "/>
</svg>