एक एसवीजी स्वचालित करें?

Question

यहां एक code demo

मेरे पास अज्ञात ऊंचाई वाला एक एसवीजी है। मैं जेसन में लोड होने और जावास्क्रिप्ट + गणित का उपयोग करने के बाद इसे समझ सकता हूं लेकिन क्या कोई सीएसएस है जिसका उपयोग मैं गतिशील रूप से आकार देने के लिए कर सकता हूं?

सीएसएस:

svg { 
    width: 500px; 
    height: 9000px; 
} 
.tabme { 
    border:3px solid red; 
    height: 200px; 
    overflow:scroll; 
} 

एचटीएमएल:

<div class="tabme"> 
    <div id="Chart"> 
    <div class="chartbody" /> 
    <svg> 
     <rect width="190" y="0" height="16" x="175" /> 
     <rect width="190" y="20" height="16" x="175" /> 
     <rect width="190" y="40" height="16" x="175" /> 
     <rect width="190" y="60" height="16" x="175" /> 
     <rect width="190" y="80" height="16" x="175" /> 
     <rect width="190" y="100" height="16" x="175" /> 
     <rect width="190" y="120" height="16" x="175" /> 
     <rect width="190" y="140" height="16" x="175" /> 
     <rect width="190" y="160" height="16" x="175" /> 
     <rect width="190" y="180" height="16" x="175" /> 
     <rect width="190" y="200" height="16" x="175" /> 
     <rect width="190" y="220" height="16" x="175" /> 
     <rect width="190" y="240" height="16" x="175" /> 
     <rect width="190" y="260" height="16" x="175" /> 
     <rect width="190" y="280" height="16" x="175" /> 
     <rect width="190" y="300" height="16" x="175" /> 
    </svg> 
    </div> 
</div> 

Answer 1

एसवीजी तत्व किसी भी चौड़ाई और ऊंचाई का श्रेय नहीं है, तो चौड़ाई/ऊंचाई calculated according to the CSS specs, के रूप में रॉबर्ट Longson द्वारा बताया होना चाहिए । हालांकि, वे मान एसवीजी की सामग्री के उचित आयामों को प्रतिबिंबित नहीं करेंगे। width और height के बजाय

// Javascript to run after document load 
 
var svg = document.getElementsByTagName("svg")[0]; 
 
var bbox = svg.getBBox(); 
 
svg.setAttribute("width", bbox.x + bbox.width + "px"); 
 
svg.setAttribute("height",bbox.y + bbox.height + "px");

<svg xmlns="http://www.w3.org/2000/svg"> 
 
    <rect x="30" y="40" width="50" height="60"/> 
 
</svg>

Answer 2

एक वैकल्पिक ऊपर जे एस के समान करने के लिए है, लेकिन सेट viewBox: आप getBBox() का उपयोग कर उचित चौड़ाई/ऊंचाई पता कर सकते हैं (ध्यान दें, नहीं viewbox!) जेएस से getBBox() कॉल के मूल्यों के साथ। फिर preserveAspectRatio="xMidYMid meet" या इसी तरह का उपयोग करें।

https://jsfiddle.net/t88pLgbb/4/