CODEWITHSUNDEEP
jquerycsssvg
LauraNMS
LauraNMS

Reputation: 2863

my svg polygons fills are not changing color on hover

I have some svg polygons. When you mouse over a polygon, I want to find part of the polygon's id, then change the fill color of all polygons that have that part of the polygon id in their id. But it isn't working. No polygon fill is changing. Anyone know what I'm doing wrong, please?

example polygons:

 <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() {

      }
    );

Upvotes: 0

Views: 719

Answers (2)

Trojan
Trojan

Reputation: 2254

Change

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

to

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

Your current line searches for elements whose IDs begin with the string "thisRow". You need to search for IDs beginning with the value of the variable thisRow.

Here's an example fiddle with only that line of JS changed (I slightly altered the HTML for ease of visibility).

Upvotes: 1

Ole Spaarmann
Ole Spaarmann

Reputation: 16771

There are two reasons I could think of:

1) The hover event bubbles, as opposed to the mouseenter event. That can cause issues especially with svg/polygon elements. So maybe try that.

2) I had issues with event listeners on SVG elements, maybe that is the same with polygons. Try binding the event to a div that contains the polygon.

Edit: It seems that you use then <polygon> element on its own. This will not work. It is an element inside a SVG. You need to attach the event listener to said SVG and add the <svg> tags. Read more here. Also make sure to wait until your DOM is ready:

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>

Upvotes: 0

Related Questions