Question

我遇到了一个我认为比实际更容易解决的问题。

我想为游戏制作一个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相比）

Answer 1

降低准确度只会有助于解析速度。一旦解析了SVG，它就不会有所作为。

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

拥有10.000多个节点的SVG - 在IE和Safari中速度很快，在Chrome和Firefox中速度很慢

1 个答案: