<svg> तत्व अपने माता-पिता के कंटेनर का विस्तार या अनुबंध कैसे करें?

Question

लक्ष्य <svg> तत्व अपने मूल कंटेनर के आकार में विस्तारित करना है, इस मामले में <div>, कोई फर्क नहीं पड़ता कि कंटेनर कितना बड़ा या छोटा हो सकता है।

कोड:

<style> 
    svg, #container{ 
     height: 100%; 
     width: 100%; 
    } 
</style> 

<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > 
     <rect x="0" y="0" width="100" height="100" /> 
    </svg> 
</div> 

इस समस्या का सबसे आम समाधान <svg> तत्व पर viewBox विशेषता सेटिंग जा रहा है।

viewBox="0 0 widthOfContainer heightOfContainer" 

हालांकि, इस मामले हैं, जहां <svg> तत्व के भीतर तत्वों पूर्वनिर्धारित चौड़ाई और/या ऊंचाइयों है में काम करने के लिए प्रतीत नहीं होता। उदाहरण के लिए, उपरोक्त कोड में <rect> तत्व, इसकी चौड़ाई और ऊंचाई स्पष्ट रूप से सेट है।

तो स्पष्ट समाधान उन तत्वों पर% चौड़ाई और% ऊंचाइयों का उपयोग करना है। लेकिन क्या यह भी किया जाना है? विशेष रूप से, <img src=test.svg > स्पष्ट रूप से <rect> ऊंचाई और चौड़ाई निर्धारित करने के साथ किसी भी समस्या के बिना ठीक काम करता है और विस्तार/अनुबंध करता है।

<rect> जैसे तत्वों, और यह की तरह अन्य तत्वों, उनकी चौड़ाई और प्रतिशत में परिभाषित ऊंचाइयों के लिए है, तो इंकस्केप में एक तरह से यह बहुत स्थापित करने के लिए है कि <svg> दस्तावेज़ उपयोग प्रतिशत चौड़ाई, ऊंचाई, आदि के साथ सभी तत्वों .. निश्चित आयामों के बजाय?

Answer 1

viewBox, कंटेनर की ऊंचाई नहीं है, यह अपने ड्राइंग के आकार है। चौड़ाई में 100 इकाइयां होने के लिए अपने viewBox को परिभाषित करें, फिर अपने rect को 10 इकाइयां परिभाषित करें। उसके बाद, हालांकि आप एसवीजी को बड़े पैमाने पर स्केल करते हैं, rect छवि की चौड़ाई 10% होगी।

Answer 2

@robertc यह सही है, लेकिन आप भी नोटिस कि svg, #container svg का कारण बनता है कुछ भी लेकिन 100% (एक बार के लिए #container और एक बार svg के लिए) के लिए तेजी से बढ़ाया जा करने की जरूरत है।

दूसरे शब्दों में, यदि मैंने दोनों तत्वों के लिए 50% एच/डब्ल्यू लगाया है, तो यह वास्तव में 50% का 50% या 5 * .5 है, जो 25, या 25% स्केल के बराबर है।

@robertc के रूप में उपयोग किए जाने पर एक चयनकर्ता ठीक काम करता है।

svg { 
    width:50%; 
    height:50%; 
} 

Answer 3

अपने iPhone के लिए आप अपने सिर balise में इस्तेमाल कर सकते हैं:

"width=device-width" 

Answer 4

क्या मेरे लिए हाल ही में काम कर रहा है <svg> टैग और सभी चाइल्ड टैग से सभी height="" और width="" विशेषताओं को दूर करने के लिए है। फिर आप मूल कंटेनर की ऊंचाई या चौड़ाई के प्रतिशत का उपयोग करके स्केलिंग का उपयोग कर सकते हैं।

Answer 5

मान लीजिए मैं एक एसवीजी जो इस तरह दिखता है:

और मैं एक div में रख और यह div जवाब देते हुए भरने बनाना चाहते हैं। ऐसा करने का मेरा तरीका निम्नानुसार है:

सबसे पहले मैं एसवीजी फ़ाइल को इंकस्केप जैसे अनुप्रयोग में खोलता हूं। फ़ाइल-> दस्तावेज़ गुणों में मैंने दस्तावेज़ की चौड़ाई 800px पर सेट की है और ऊंचाई 600px तक है (आप अन्य आकार चुन सकते हैं)। तब मैं इस दस्तावेज़ में एसवीजी फिट करता हूं।

तब मैं इस फाइल को एक नया एसवीजी फ़ाइल के रूप में बचाने के लिए और इस फ़ाइल से पथ डेटा मिलता है। अब HTML पर कोड है कि जादू करता है इस प्रकार है:

<div id="containerId">  
    <svg 
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns="http://www.w3.org/2000/svg" 
    version="1.1" 
    x="0" 
    y="0" 
    width="100%" 
    height="100%" 
    viewBox="0 0 800 600" 
    preserveAspectRatio="none"> 
     <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/> 
    </svg> 
</div> 

ध्यान दें कि चौड़ाई और एसवीजी की ऊंचाई दोनों 100% की तैयारी में हैं, क्योंकि हम यह कंटेनर अनुलंब और क्षैतिज भरने के लिए चाहते हैं, लेकिन चौड़ाई और व्यू की ऊंचाई बॉक्स बॉक्स में इंकस्केप में चौड़ाई और ऊंचाई के समान है जो 800px X 600px है। अगली चीज़ जो आपको करने की ज़रूरत है वह preserveAspectRatio को "none" पर सेट करें। यदि आपको इस विशेषता पर अधिक जानकारी की आवश्यकता है तो यहां एक अच्छा link है। और यह सब कुछ है।

एक और बात यह है कि यह कोड लगभग सभी प्रमुख ब्राउज़रों पर भी पुराने काम करता है लेकिन एंड्रॉइड और आईओएस के कुछ संस्करणों पर आपको इसे लगातार रखने के लिए कुछ जावास्क्रिप्ट/jQuery कोड का उपयोग करने की आवश्यकता है। मैं दस्तावेज़ तैयार और आकार बदलने के कार्यों में निम्नलिखित का उपयोग करता हूं:

$('#svgId').css({ 
    'width': $('#containerId').width() + 'px', 
    'height': $('#containerId').height() + 'px' 
}); 

आशा है कि इससे मदद मिलती है!