Search code examples
javascriptcssfirefoxsvgjquery-svg

SVG weird behaviour on hover only in firefox - svg-jquery.

I was only playing around with SVG when I noticed that added a hover effect to the elements acts rather oddly but only in FE. In ie, chrome etc its all working as i would expect.

In short, hovering over elements does add the hover styles, but not always when expected.

Oddly, if you scroll to the bottom of the 1000 SVG (stress tests) and you hover in the white area just beneath the lst elements you will see it applys the hover effect whilst not touching the elements.

this is how i'm buiding the SVG's

    for (var i=0;i<1000;i++)
{
    var newBlock = $('<div id="map'+i+'">');
    newBlock.svg();
    newBlock.appendTo($('body'));
    console.info(newBlock);
    var svg = newBlock.svg('get');
    svg.polygon([[17,0],[33,8],[33,27],[16,34],[0,26],[0,8]], {fill: '#B8E100', stroke: '#A5CC00', strokeWidth: 1});
}

http://jsfiddle.net/2cB89/

Any ideas why this is happening and why its only happening in firefox?

Solution

  • You need to give the svg element width and height attributes.

    Add the following after the var svg line.

        svg.configure({width: '34px', height: '35px'});

    Without them the svg should be sized to 300 x 150 pixels. Chrome doesn't implement the sizing correctly and Firefox does, although in your case the default behaviour of Chrome is closer to what you want.

    Here's a corrected jsFiddle