性能 – 具有10.000个节点的SVG – 在IE和Safari中速度很快,在Chrome和Firefox中速度很慢

2019年8月4日 294次阅读

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

我想创造一个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>

你可以在这里看到结果：
http://www.ridiesorridi.it/puzzle/17.svg

如果你在Safari或IE中打开它,它可以完美地工作,没有延迟.如果您在Chrome或Firefox中打开以突出显示某个部分,则速度非常慢.你可以想象我把这个SVG放在一个HTML页面里…… !!相反,在IE和Safari中它保持良好的工作状态.

我的问题是：如何通过Chrome和Firefox解决此问题？
我已经尝试删除额外的小数(以“优化svg”),但它不起作用.

编辑我注意到在Chrome和Firefox中,如果我放大(如400％),它可以完美地工作.一旦将所有元素组合在一起,它就会出现问题(与IE和Safari相比)

最佳答案 降低准确性只会有助于解析速度.一旦解析了SVG,它就不应该有所作为.

我不确定FF和Chrome在测试悬停SVG元素时使用的优​​化措施(如果有的话).但我当然会尝试降低碎片的复杂性.例如,片段“g1”在其定义中有89个路径命令.您至少应该能够将其减少4倍,并且仍能获得准确的拼图形状.

点赞