1

要素にホバー効果を追加すると、かなり奇妙に動作するが、FEでのみ動作することに気付いたとき、私はSVGで遊んでいました。つまり、クロムなどはすべて私が期待するように機能しています。

つまり、要素にカーソルを合わせると、ホバースタイルが追加されますが、必ずしも期待どおりになるとは限りません。

奇妙なことに、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でのみ起こっているのかという考えはありますか？

4

1 に答える 1

1

svg 要素の幅と高さの属性を指定する必要があります。

行の後に次を追加しますvar svg。

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

それらがない場合、svg は 300 x 150 ピクセルのサイズにする必要があります。Chrome はサイジングを正しく実装していませんが、Firefox はそうしていますが、あなたの場合、Chrome のデフォルトの動作はあなたが望むものに近いものです。

ここに修正された jsFiddleがあります

于 2013-02-03T08:37:06.847 に答える