SVGでは、より軽い：ポリゴンまたはパス？

Question

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

、有意差がないことがあります。私もそれを答えとして受け入れます。

ありがとうございます。

Answer 1

大きな違いがあるのではないかと疑いがありますが、もしあれば、polygonは、ポリゴンのために少しだけ速くなると思います。

実際、2つのプロファイリングスクリプト（下記参照）を実行した後、上記の評価が正しく表示されます。ポリゴンはすべてのブラウザのパスよりも少し速いですが、違いはほとんどありません。だから私はあなたが本当にこれについて心配する必要があるとは思わない。幸いにも、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> 

Answer 2

は、私はあまり知らない答えに私のコメント...

を変えてしまいました詳細についてはSVGについては、しかし...私は変換自体が同じ量の時間を取ると仮定します。メモリ内の赤。たとえそうでなくても、レンダリングが他のものよりも多くのリソースを必要とするという事実によって、追加の「重さ」が大幅に上回る可能性があります。たくさんのSVG要素を含む例については、http://en.wikipedia.org/wiki/File:10-simplex_t03.svgを参照してください。

とにかく、パフォーマンスに大きな違いがない場合は、ポリゴンタグの使用に同意しますが、セマンティクスだけではありません。誤って六角形を湾曲させるのを防ぎ、構文が簡単になります。