एसवीजी में, जो हल्का है: बहुभुज या पथ?

Question

मैं एक कार्टेशियन विमान में गठबंधन 600+ एसवीजी तत्वों द्वारा रचित नक्शा प्रस्तुत कर रहा हूं। मुझे उन्हें अलग-अलग तत्व होने की आवश्यकता है क्योंकि मैं चाहता हूं कि वे व्यक्तिगत रूप से माउस घटनाओं का जवाब दें।

मेरा प्रश्न है: उदाहरण के लिए "अनुवाद" (अपनी स्थिति बदलना) जैसे कई परिवर्तनों को लागू करने के उद्देश्य से, विकल्प ब्राउज़र के लिए "हल्का" है?

इस षट्भुज तरह प्रतिपादन बहुभुज:

<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 अपेक्षाकृत तेज़ी से होने की उम्मीद है, क्योंकि यह विशेष रूप से, बहुभुज के बारे में आपको पता है।

वास्तव में, दो प्रोफाइलिंग स्क्रिप्ट (नीचे देखें) चलाने के बाद, मेरा उपरोक्त मूल्यांकन सही दिखाई देता है। बहुभुज सभी ब्राउज़रों में पथों की तुलना में थोड़ा तेज़ हैं, लेकिन अंतर शायद ही महत्वपूर्ण है। तो मुझे संदेह है कि आपको इसके बारे में चिंता करने की ज़रूरत है। सौभाग्य से, 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

एक जवाब के लिए मेरी टिप्पणी ...

बदलते मैं बहुत ज्यादा पता नहीं है समाप्त एसवीजी के बारे में विस्तार से, लेकिन ... मुझे लगता है कि परिवर्तन स्वयं ही उतना ही समय लेगा, क्योंकि यह सिर्फ बिंदुओं के मूल्यों को बदल रहा होगा स्मृति में लाल। यहां तक ​​कि यदि नहीं, तो अतिरिक्त "भारीपन" की संभावना इस तथ्य से काफी अधिक हो जाएगी कि प्रतिपादन उस चीज़ के लिए सबसे अधिक संसाधनों की आवश्यकता है। बहुत सारे और बहुत से एसवीजी तत्वों के साथ उदाहरण के लिए http://en.wikipedia.org/wiki/File:10-simplex_t03.svg देखें।

वैसे भी, यदि ऐसा कोई मामला है कि इसमें कोई महत्वपूर्ण प्रदर्शन अंतर नहीं है, तो मैं भी बहुभुज टैग के लिए जाने पर सहमत हूं, लेकिन न केवल अर्थशास्त्र के कारण। यह आपको गलती से हेक्सागोन curvy बनाने से रोक देगा, और वाक्यविन्यास सरल है।