विंडो आकार बदलने पर एचटीएमएल में एम्बेडेड एक एसवीजी ऑटोस्केलिंग

Question

मैं एचटीएमएल पेज में कुछ एसवीजी को इस तरह से आकार देना चाहता हूं जैसे स्वचालित रूप से आकार बदलता है (एसवीजी, सीएसएस, या जेएस का उपयोग करके) पृष्ठ का आकार बदलता है, जबकि अभी भी संरक्षित है मूल पहलू अनुपात।

उदाहरण के लिए

, W3Schools से एक उदाहरण का उपयोग करते हुए:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    <circle cx="100" cy="50" r="40" stroke="black" 
    stroke-width="2" fill="red"/> 
</svg> 

यह एसवीजी चौड़ाई = खिड़की चौड़ाई के 5% सेट करने के लिए, और ऊंचाई के अनुपात में बढ़ाया है संभव है?

मैंने preserveAspectRatio="xMinYMin meet" सहित कुछ चीजों की कोशिश की है और <div> कंटेनर के भीतर आयामों को 100% पर सेट किया है, लेकिन इसे अभी तक काम नहीं मिला है।

कोई सुझाव?

Answer 1

आप अपने एसवीजी मूल तत्व पर एक viewBox -attribute की जरूरत है, जो एसवीजी छवि का कुल आकार को परिभाषित करेंगे:

<svg version="1.1" viewBox="0 0 300 185"> 

अब आप सीएसएस और यह के माध्यम से चौड़ाई या छवि की ऊंचाई सेट कर सकते हैं पूरी तरह से स्केल करेंगे।