在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中，哪個更輕：多邊形還是路徑？

回答

相關問題