В SVG, который легче: полигон или путь?

Я представляю карту, составленную из 600+ элементов SVG, выровненных в картезианской плоскости. Мне нужно, чтобы они были отдельными элементами, потому что я хочу, чтобы они индивидуально реагировали на события мыши и т.д.

Мой вопрос: для того, чтобы применить множество преобразований, например, "перевести" (изменив свои позиции), какая опция "легче" для браузеров?

Рендеринг полигонов, подобных этому шестиугольнику:

<polygon points="43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50"></polygon>

... или создавая их как пути, подобные этому:

<path d="M43.301270189221924,55L43.301270189221924,65L51.96152422706631,70L60.6217782649107,65L60.6217782649107,55L51.96152422706631,50Z"></path>

Конечно, не может быть никакой разницы. Я тоже приму это в ответ.

Спасибо заранее.

Ответ 1

Я сомневаюсь, что там будет большая разница, но если есть, я бы ожидал, что polygon будет немного быстрее, поскольку это специально предназначено для, вы знаете, полигонов.

Фактически, после запуска двух сценариев профилирования (см. ниже), моя оценка выше. Полигоны немного быстрее, чем пути во всех браузерах, но разница вряд ли значительна. Поэтому я сомневаюсь, что вам действительно нужно беспокоиться об этом. К счастью, polygon звучит как логический выбор.

Профилирование path:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="paths"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var d = "M43.301270189221924,55 L43.301270189221924,65 L51.96152422706631,70 L60.6217782649107,65 L60.6217782649107,55 L51.96152422706631,50 Z";

    var paths = document.getElementById('paths');
    var path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
    path.setAttribute('d', d);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = path.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        paths.appendChild(el);
    }

    setTimeout(function() {
        document.getElementById('out').textContent += 'Path: ' + (new Date() - start) + 'ms';
        // paths.parentNode.removeChild(paths);
    }, 10);

    ]]>
    </script>
</svg>

И то же самое для polygon:

<svg xmlns="http://www.w3.org/2000/svg">
    <g id="polygons"></g>

    <text x="20" y="20" id="out"></text>

    <script><![CDATA[
    var points = "43.301270189221924,55 43.301270189221924,65 51.96152422706631,70 60.6217782649107,65 60.6217782649107,55 51.96152422706631,50";

    var polygons = document.getElementById('polygons');
    var polygon = document.createElementNS("http://www.w3.org/2000/svg", 'polygon');
    polygon.setAttribute('points', points);

    var start = new Date();
    for (var i = 0; i < 20000; i++)
    {
        var el = polygon.cloneNode(true);
        el.setAttribute('transform', 'translate(' + ((i * 20) % 1000) + ',' + ((i / 50) * 20) + ')');
        polygons.appendChild(el);
    }

    setTimeout(function(){
        document.getElementById('out').textContent += 'Polygons: ' + (new Date() - start) + 'ms';
        // polygons.parentNode.removeChild(polygons);
    }, 10);

    ]]>
    </script>
</svg>

Ответ 2

Закончено изменить мой комментарий на ответ...

Я не очень разбираюсь в SVG подробно, но... Я бы предположил, что само преобразование займет столько же времени, сколько просто изменит значения точек, хранящихся в памяти. Даже если нет, дополнительная "тяжесть", вероятно, будет значительно перевешиваться тем фактом, что рендеринг - это то, что требует от большинства ресурсов больше всего. См. http://en.wikipedia.org/wiki/File:10-simplex_t03.svg для примера с большим количеством элементов SVG.

В любом случае, если это так, что нет существенной разницы в производительности, тогда я тоже соглашусь идти на тег polygon, но не только из-за семантики. Это помешало бы вам случайно создать шестиугольник, и синтаксис будет проще.