एसवीजी

में गतिशील रूप से आयतों को रेखांकित करें मैं एसवीजी के साथ 100 आयतों को आकर्षित करने के बारे में जानना चाहता हूं।एसवीजी

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<body> 

    <svg id="svgOne" xmlns="http://www.w3.org/2000/svg" width="5000" height="3000"> 
    <rect x="50" y="50" width="50" height="50" fill="black" /> 
    </svg> 

</body> 
</html>

मैं एक ही आकार, अलग स्थान (पंक्ति में 10 की तरह और 10 पंक्तियाँ) के साथ आयतों की 100 आकर्षित करने के लिए तरह woukd:

मैं इस कोड के साथ एक आयत बना दिया। इसे तेजी से कैसे करें? कुछ पाश?

स्रोत

2012-10-08 Jacek Krasucki

एक पुस्तकालय एक का उपयोग कर रहा है विकल्प, या आप सीधे जावास्क्रिप्ट के साथ ऐसा करना चाहते हैं? – nrabinowitz

इसके लिए लाइब्रेरी का उपयोग पूरा हो जाएगा – saml

आप निम्न पाश के साथ स्क्रीन को भरने कर सकते हैं:

var svgns = "http://www.w3.org/2000/svg"; 
for (var x = 0; x < 5000; x += 50) { 
    for (var y = 0; y < 3000; y += 50) { 
     var rect = document.createElementNS(svgns, 'rect'); 
     rect.setAttributeNS(null, 'x', x); 
     rect.setAttributeNS(null, 'y', y); 
     rect.setAttributeNS(null, 'height', '50'); 
     rect.setAttributeNS(null, 'width', '50'); 
     rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16)); 
     document.getElementById('svgOne').appendChild(rect); 
    } 
}

तुम सिर्फ 100 बेतरतीब ढंग से रखा वर्गों चाहते हैं, आप कर सकता है:

for (var i = 0; i < 100; i++) { 
    var x = Math.random() * 5000, 
     y = Math.random() * 3000; 

    var rect = document.createElementNS(svgns, 'rect'); 
    rect.setAttributeNS(null, 'x', x); 
    rect.setAttributeNS(null, 'y', y); 
    rect.setAttributeNS(null, 'height', '50'); 
    rect.setAttributeNS(null, 'width', '50'); 
    rect.setAttributeNS(null, 'fill', '#'+Math.round(0xffffff * Math.random()).toString(16)); 
    document.getElementById('svgOne').appendChild(rect); 
}

jsfiddle for the second one

स्रोत

2012-10-08 17:52:31 saml

यह बेवकूफ है, लेकिन क्या आप मुझे दिखा सकते हैं कि पूरा कोड कैसा दिखना चाहिए ?? –

मैंने यह किया, सहायता के लिए THX। –

क्या आप स्वीकार कर सकते हैं, अगर यह आपके प्रश्न का उत्तर देता है? – saml

एसवीजी

उत्तर

संबंधित मुद्दे