Geek Answers Handbook

SVG with 10,000+ nodes - fast in IE and Safari, slow in Chrome and Firefox

I ran into a problem that I thought would be easier to solve than it really is.

I want to create a puzzle with 4860 pieces for the game. The puzzle grid is made using SVG. Below I am reporting a piece of code to give you an idea. The code works as you can see in the last link I gave you.

I created a list of paths in defs (18 in total), then a long list of 4860 so that I could make my riddle. When the mouse moves over one part, I want this fragment to be selected. This is the code (first part), followed by a series of tags like the one in the example.

<?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>

You can see the result here: http://www.ridiesorridi.it/puzzle/17.svg

Safari IE, . Chrome Firefox, , . , SVG HTML-...!! IE Safari .

: Chrome Firefox? ( " svg" ), .

. , Chrome Firefox, (, 400%), . , ( IE Safari).

+4
1

. SVG , .

, , , FF Chrome SVG. , , . , "g1" 89 . 4 , , - .

+2

More articles:


All Articles