SVG奇怪的行为只在firefox - svg-jquery中悬停。

时间:2013-02-03 02:34:53

标签: javascript css firefox svg jquery-svg

我只是在玩SVG时,我发现添加悬停效果的元素很奇怪,但仅限于FE。在ie等铬,它的全部工作正如我所料。

简而言之,将鼠标悬停在元素上会添加悬停样式,但并不总是在预期时添加。

奇怪的是,如果你滚动到1000 SVG的底部(压力测试),你将鼠标悬停在lst元素正下方的白色区域,你会看到它应用悬停效果而不接触元素。

这就是我如何建立SVG的

    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/

为什么会发生这种情况的原因以及为什么它只发生在firefox中?

1 个答案:

答案 0 :(得分:1)

您需要提供svg元素的width和height属性。

var svg行之后添加以下内容。

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

没有它们,svg的大小应该是300 x 150像素。 Chrome没有正确实现大小调整,但Firefox确实如此,但在您的情况下,Chrome的默认行为更接近您的需求。

这是corrected jsFiddle