जावास्क्रिप्ट के साथ svg <g transform = scale (X)> के तर्क को कैसे बदलें?

Question

अरे।
मान लें कि मेरे पृष्ठ पर कहीं मेरे पास एसवीजी ग्राफिक्स हैं। एक ऐसा समूह है जिसे मैं कुछ ईवेंट ट्रिगर होने पर फिर से स्केल करना चाहता हूं। मैं उसको कैसे करू?
उदाहरण कोड:

<svg onresize="getDivSize(evt)"> 
    <g transform=scale(13)> 
     <rect id="Square" class="chart" 
      width="80" height="20" 
      fill="black" 
      stroke-width="0px" 
      rx="8" ry="8" /> 
     <text id="TextElement" x="13" y="15" fill="green">Text</text> 
    </g> 
</svg> 

मैं पैमाने (13) तर्क को बदलने के लिए, कि समारोह getScreenSize (evt) {...} में क्या होना चाहिए क्या करना चाहते हैं?
या विभिन्न तरीकों से समान प्रभाव कैसे प्राप्त करते हैं?

संपादित
सामान्य विचार मैं कहीं भी तय मान निर्दिष्ट किए बिना ग्राफ़िक का आकार परिवर्तित करना चाहते हैं के लिए के रूप में। तो मेरे divs आकार प्रतिशत आधारित हैं, अब मैं बस अपने ग्राफिक अपने आकार के बावजूद मेरे div फिट करने के लिए चाहते हैं। यही कारण है कि मैंने जेएस बदलते पैमाने() तर्क के बारे में सोचा जब भी घटना को निकाल दिया जाता है (div resize)। समारोह DivSize/rectBaseSize (x या y) के स्केल तर्क गणना में डाल दिया जाएगा।

Answer 1

<g> के लिए एक आईडी गुण जोड़ें और फिर इस कोशिश:

document.getElementById("id_of_g_element").transform.baseVal.getItem(0).setScale(new_scalex,newscale_y); 

या वैकल्पिक रूप से:

document.getElementById("id_of_g_element").setAttribute("transform", "scale(" + new_scalex + "," + new_scaley + ")"); 

दूसरी ओर, क्यों तुम सिर्फ एक viewBox प्रयोग नहीं करते हैं करने के लिए svg सामग्री स्वचालित रूप से rescaled? या क्या दिखाया जाना चाहिए पर विशिष्ट बाधाएं हैं? CSS3 मीडिया-प्रश्नों के आधार पर गैर-स्क्रिप्टेड समाधानों में से कुछ ऐसा करना भी संभव है, http://www.youtube.com/watch?v=YAK5el8Uvrg देखें (उस प्रस्तुति में दिखाए गए डेमो फ़ाइलों के लिंक के विवरण को जांचना न भूलें)।

Answer 2

आप सिर्फ 'एक एसवीजी एक DIV के आकार के पैमाने पर करने के चाहते हैं, आप के रूप में अब तक मैं 4 घंटे अनुभव है कि सीएसएस के साथ

#stretched-image { 
    margin: 0; 
    position:fixed; 
    top:0; left:0; right:0; bottom:0; 
    height:100%; 
    background-size:cover; 
    display: block; 
    background-position:50% 50%; 
    background-image: url(../img/pic.svg); 
}