Performance 带有10.000+的SVG；节点-IE和Safari中速度快，Chrome和Firefox中速度慢

我正面临一个我认为比实际情况更容易解决的问题

我想为一个游戏制作一个4860块的拼图。拼图的网格是用SVG制作的。下面我报告了部分代码，只是想给你一个想法。正如我给你的最后一个链接所示，代码正在运行

我在defs中创建了一个路径列表（总共18条），然后是一个4860条的长列表，这样我就可以制作我的拼图了。 当鼠标移动到一块上时，我希望突出显示这一块。 这是代码（第一部分），后面是一系列标记，如示例中的标记

<?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" width="1200" height="1200" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
      <defs>
          <style type="text/css">
            .use1 {
                stroke: #000000;
                fill: #ffffff;
                fill-opacity: 0.1;
                stroke-linecap: butt;
            }
            .use1:hover {
                fill: #ffffff;
                fill-opacity: 0.8;
                stroke: #3273BE;
                stroke-width: 10;
                }
            .base {
                     }

          </style>

      <path id="a0" d="m152.199493 121.414993c-0.349991 2.4 -0.3 4.8 0 7.169998c1.200012 8.3 6.6 15.9 16.3 17.419998c12.858994 2 14 -5.5 23.2 . (...) "/>
      .... the other 17 paths .....
</defs>
<image x="0" y="0" width="1200" height="720" xlink:href="lana-del-rey-ultraviolence-recensione.jpg" />

<use xlink:href="#C5" x="-50" y="-50" transform="scale(0.088) rotate(0)" class="use1" id="1"/>
....
... x 4860 ....
....
</svg>

.use1{
行程：#000000；
填充：#ffffff；
填充不透明度：0.1；
笔划线头：对接；
}
.use1：悬停{
填充：#ffffff；
填充不透明度：0.8；
冲程：#3273BE；
笔画宽度：10；
}
.基地{
}
.... 其他17条路。。。。。
....
... x4860。。。。
....

您可以在此处看到结果：

如果你在Safari或IE中打开它，它会毫无延迟地完美工作。如果在Chrome或Firefox中打开以突出显示某个片段，则速度非常慢。你可以想象，当我把这个SVG放在一个HTML页面中时！！相反，在IE和Safari中，它一直工作得很好

我的问题是：如何用Chrome和Firefox解决这个问题？ 我已经尝试过删除额外的小数（以“优化svg”），但没有成功

---

编辑我注意到，在Chrome和Firefox中，如果我放大（比如400%），效果会非常好。一旦将所有元素放在一起，它就会不断出现问题（与IE和Safari相比）

降低准确性只会有助于解析速度。一旦SVG被解析，它就不会有什么不同了

---

我不确定FF和Chrome在测试SVG元素悬停时使用了哪些优化（如果有的话）。但我肯定会尝试降低作品的复杂性。例如，工件“g1”的定义中有89个路径命令。您至少应该能够将其减少4倍，并且仍然可以获得准确的拼图形状。

谢谢您的回复。我现在要试试。我会报告实验结果。我试过了，但还是一样。我简化了svg，手动编辑每个节点。正如你所看到的，IE和Safari都非常完美，Chrome和Firefox则不一样。我发现了一件事：如果在Chrome I zoom（400%）中，它的工作原理与IE非常相似，但当然，我只看到了一小部分元素。还有其他想法吗？试着将

元素分成若干组。例如，每行一个

。这可能允许浏览器通过先测试组bbox来一次消除整行。Paul，再次感谢您的回复，但仍然是一样的。我试着给每一行加上一个g，然后一个g是一行的一半，最后每次使用一个g（这是你可以在链接中找到的版本）。在所有3种情况下仍然相同…：（提到的bug中的信息是FF开发人员的内部实现讨论。目前没有任何东西可以帮助您。