在SVG中，哪个更轻：多边形还是路径？

我呈现在一个直角平面排列的600个SVG元素组成的地图。我需要它们是单独的元素，因为我希望它们能够单独响应鼠标事件等。在SVG中，哪个更轻：多边形还是路径？

我的问题是：为了应用诸如“translate”（改变其位置）等很多转换的目的，例如选项对浏览器来说“更轻”？

多边形渲染这样的六边形：

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

当然，也有可能是没有差别。我也会接受这个答案。

在此先感谢。

来源

2011-08-05 Hilton Perantunes

我明白了。如果没有显着的性能差异，即使在渲染中，我也会选择语义，如果要绘制六边形，则选择“多边形”。但也许一些浏览器供应商已经为这些元素之一实施了一些特定的优化...？ –

@hperantunes：现代SVG表现来看，我不认为浏览器厂商已经实现了特定的优化对于任何SVG元素:)你总是可以测试自己的表现。但我同意JAB。 – alexantd

我怀疑会有很大的差别，但如果有的话，我期望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>

来源

2011-08-05 15:34:23 mercator

+1用于执行实际基准。 – JAB

最终改变我的一个答案评论...

我不很懂有关SVG详细明智的，但是......我会假设转换本身将采取相同的时间量，因为它刚刚被改变点STO的值记忆中的红色。即使不是这样，额外的“沉重”可能会被渲染是最需要大量资源的事实大大超过。有关很多SVG元素的示例，请参阅http://en.wikipedia.org/wiki/File:10-simplex_t03.svg。

无论如何，如果它是没有显著的性能差异的话，那么我也将同意去为多边形的标签，但由于语义的不公平。它会阻止你无意中使六角曲线变形，并且语法更简单。

来源

2011-08-05 15:35:03 JAB

在SVG中，哪个更轻：多边形还是路径？

回答

相关问题