SVG 悬停时的奇怪行为仅在 Firefox - svg-jquery 中。答案

【问题标题】：SVG weird behaviour on hover only in firefox - svg-jquery.SVG 悬停时的奇怪行为仅在 Firefox - svg-jquery 中。
【发布时间】：2013-02-03 02:34:53
【问题描述】：

当我注意到向元素添加悬停效果时，我只是在玩 SVG，这种行为相当奇怪，但仅限于 FE。在 ie、chrome 等中，它的所有工作都符合我的预期。

简而言之，将鼠标悬停在元素上确实会添加悬停样式，但并非总是如预期的那样。

奇怪的是，如果您滚动到 1000 SVG（压力测试）的底部并将鼠标悬停在第一个元素下方的白色区域，您会看到它应用了悬停效果而不接触元素。

这就是我构建 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 中？

【问题讨论】：

你的 doc dec 是什么样的？

标签： javascript css firefox svg jquery-svg

【解决方案1】：

您需要为 svg 元素提供宽度和高度属性。

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

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

没有它们，svg 的大小应为 300 x 150 像素。 Chrome 无法正确实现大小调整，而 Firefox 可以，尽管在您的情况下，Chrome 的默认行为更接近您想要的。

这是corrected jsFiddle

【讨论】：