अपने मूल कंटेनर में <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>

इस समस्या का सबसे आम समाधान तत्व viewBoxपर विशेषता स्थापित करना प्रतीत <svg>होता है।

viewBox="0 0 widthOfContainer heightOfContainer"

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

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

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

Comments

एक फ़ाइल के रूप में svg को सहेजें, इसे एक छवि के रूप में संदर्भित करें, जैसे <img src = "file.svg" /> और इस तरह से आप चौड़ाई का उपयोग कर सकते हैं: 100% या ऊंचाई: 100%

— बर्मी

संभव डुप्लिकेट मैं अपने मूल कंटेनर के साथ svg स्केल कैसे बना सकता हूं?

— चार्ल्स

Answer 1

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

Comments

लेकिन सवाल यह है: एसवीजी को कैसे स्केल किया जाए?

— एड्रियन हेन

@ AdrianLang स्केलिंग स्वचालित रूप से तब होती है जब आप SVG ऑब्जेक्ट पर एक आकार सेट करते हैं, जैसा कि प्रश्न में कोड में पहले से ही किया गया है। यहाँ उदाहरण का एक निश्चित संस्करण है ।

— रॉबर्ट

आप सही हैं, महान हैं, जो वास्तव में मेरे लिए काम करता है। मुझे लगता है कि मेरी समस्या मेरे svg मूल तत्व में ऊंचाई और चौड़ाई के गुण थे।

— एड्रियन हेन

मैंने उस फिडल को कुछ मामूली मोड़ दिए, ताकि आकार अनुपात के संरक्षण के बिना क्षैतिज और लंबवत रूप से मजबूर किया जा सके, और यह IE में काम कर सके, जबकि फिडल @robertc प्रस्तुत नहीं किया गया था। आशा है कि यह सड़क के नीचे किसी की मदद करेगा!

— मिस्टर क्रिमसन

डिफ़ॉल्ट रूप से आपका svg जितना संभव हो उतना बड़ा होगा ताकि यह पूरी तरह से दिखाई दे, लेकिन यह पहलू अनुपात को संरक्षित करता है (इसलिए एक वर्ग व्यूबॉक्स पूरी तरह से एक आयताकार माता-पिता को नहीं भरेगा)। यदि आप वास्तव में इसे मूल कंटेनर को पूरी तरह से कवर करने के लिए बाध्य करना चाहते हैं, तो SVG तत्व में preserveAspectRatio = "none" जोड़ें ।

— पैट्रिकसुर्री

Answer 2

मान लीजिए मेरे पास एक SVG है जो इस तरह दिखता है:

और मैं इसे एक div में रखना चाहता हूं और इसे div को जिम्मेदारी से भरना चाहता हूं। इसे करने का मेरा तरीका इस प्रकार है:

सबसे पहले मैंने एसवीजी फ़ाइल को एक एप्लिकेशन में ओपनस्केप की तरह खोला। File-> डॉक्यूमेंट प्रॉपर्टीज में मैंने डॉक्यूमेंट की चौड़ाई 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% पर सेट है, क्योंकि हम चाहते हैं कि यह कंटेनर को लंबवत और क्षैतिज रूप से भरे, लेकिन व्यूबॉक्स की चौड़ाई और ऊंचाई एकरूपता में दस्तावेज़ की चौड़ाई और ऊंचाई के समान होती है जो 800 मिलियन X है 600px। अगली बात जो आपको करने की ज़रूरत है वह "कोई नहीं" के लिए संरक्षित करें। यदि आपको इस विशेषता के बारे में अधिक जानकारी की आवश्यकता है तो यहां एक अच्छा लिंक है । और यही सब कुछ है।

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

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

आशा करता हूँ की ये काम करेगा!

Comments

प्रिजर्वएस्पेक्टर अनुपात के लिए +1। उच्च और निम्न शिकार करने के बाद एक एसवीजी को वास्तव में खिंचाव (स्केल नहीं) से एक div तक लाने के लिए, यह सही उत्तर था।

— एडेलफस

@ गाज़ोरिस, इस अद्भुत उत्तर के लिए धन्यवाद। उसी पर सवाल है। क्या होगा अगर मेरे svg नेस्टेड है। उदाहरण के लिए, <svg> <svg id = "1"> </ svg> <svg id = "2"> </ svg> </ svg> मैं svg 1 और 2 को सशर्त रूप से प्रदर्शित करना चाहता हूं और इसे चौड़ाई और ऊंचाई लेनी चाहिए कंटेनर के। <div id = "कंटेनर" शैली = "चौड़ाई: 200px; ऊँचाई: 200px;"> </ div> क्या आप इस पर मेरी मदद कर सकते हैं।

— प्रसाद परब

@ रेज़ा बारादरान: जीनियस।

— दानामद

Answer 3

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

Comments

क्या आप एक काम करने का उदाहरण दे सकते हैं? मुझे यह कुछ भी करने के लिए नहीं मिल सकता है।

— माइकल

Answer 4

@robertc के पास यह सही है, लेकिन आपको यह भी ध्यान देने की आवश्यकता है कि svg, #containersvg के कारण किसी भी चीज़ के लिए तेजी से बढ़ा जा सकता है लेकिन 100% (एक बार के लिए #containerऔर एक बार svg)।

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

जब @robertc का सुझाव दिया जाता है तो एक चयनकर्ता ठीक काम करता है।

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

Comments

ऐसा इसलिए है क्योंकि अपने चयनकर्ता svg, #containerसे मेल खाता है दोनोंsvg डोम तत्व और#container डोम तत्व। मेरा मानना ​​है कि आप इसके बजाय देख रहे थे svg #container, लेकिन अगर आप आईडी का उपयोग कर रहे हैं तो माता-पिता के विनिर्देश आवश्यक नहीं हैं।

— निट

क्या ऐसा बिल्कुल नहीं है जो मैंने कहा था, "एक बार #container के लिए और एक बार svg के लिए"?

— जस्टिन पुटनी

क्षमा करें, आप सही कह रहे हैं, लेकिन आपका जवाब थोड़ा अजीब तरह से शब्द गलतफहमी के लिए अग्रणी है। ऐसा लगता है जैसे आप पहली बार एक संभावित गोच के बारे में बात कर रहे हैं।

— लीख

Answer 5

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

"width=device-width"