मैं अपने मूल कंटेनर के साथ एक एसवीजी स्केल कैसे बना सकता हूं?

Question

जब आकार गैर-मूल है तो मैं एक इनलाइन svg तत्व की सामग्री स्केल चाहता हूं। बेशक मैं इसे एक अलग फ़ाइल के रूप में प्राप्त कर सकता हूं और इसे इस तरह स्केल कर सकता हूं।

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

हालांकि, मैं सीएसएस के माध्यम से एसवीजी करने के लिए अतिरिक्त शैलियों को जोड़ने के लिए है, तो जोड़ने के लिए एक बाहरी एक एक विकल्प नहीं है चाहता हूँ। मैं इनलाइन एसवीजी स्केल कैसे बना सकता हूं?

Answer 1

छवि के स्केल किए गए आकार से स्वतंत्र रूप से एसवीजी छवि के भीतर निर्देशांक निर्दिष्ट करने के लिए, छवि के समन्वय प्रणाली में छवि का बाउंडिंग बॉक्स क्या है, और यह निर्धारित करने के लिए एसवीजी तत्व पर viewBox विशेषता का उपयोग करें। width और height विशेषताएँ परिभाषित करने के लिए विशेषताएं हैं कि युक्त पृष्ठ के संबंध में चौड़ाई या ऊंचाई क्या है।

उदाहरण के लिए, यदि आपके पास निम्न:

<svg> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

यह 20px त्रिकोण द्वारा एक 10px के रूप में प्रस्तुत करना होगा: अब

, आप केवल चौड़ाई और ऊंचाई निर्धारित करते हैं, जो एसवीजी तत्व के आकार को बदल देगा, लेकिन त्रिभुज को स्केल नहीं करेगा:

<svg width=100 height=50> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

यदि आप व्यू बॉक्स सेट करते हैं, तो यह छवि को बदलने के कारण होता है जैसे दिया गया बॉक्स (छवि की समन्वय प्रणाली में) दी गई चौड़ाई और ऊंचाई के भीतर फिट करने के लिए बढ़ाया जाता है (समन्वय प्रणाली में पृष्ठ का)। उदाहरण के लिए, त्रिकोण ऊपर पैमाने पर करने के होने की 50px से 100px:

<svg width="100%" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

:

<svg width=100 height=50 viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

आप HTML व्यूपोर्ट की चौड़ाई के लिए इसे पैमाने चाहते हैं

ध्यान दें कि डिफ़ॉल्ट रूप से, पहलू अनुपात संरक्षित है।तो आपके द्वारा निर्दिष्ट करता है, तो उस तत्व 100% की चौड़ाई होना चाहिए, लेकिन 50px की ऊंचाई, यह वास्तव में केवल 50px की ऊंचाई के पैमाने पर होगा (जब तक आप एक बहुत ही संकीर्ण खिड़की है):

<svg width="100%" height="50px" viewBox="0 0 20 10"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

आप वास्तव में यह preserveAspectRatio=none साथ, क्षैतिज फैलाने के लिए पहलू अनुपात के संरक्षण को निष्क्रिय करना चाहते हैं:

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"> 
    <polygon fill=red stroke-width=0 
      points="0,10 20,10 10,0" /> 
</svg> 

,210

(ध्यान दें मेरे उदाहरण में है कि जब मैं वाक्य रचना है कि HTML एम्बेडिंग के लिए काम करता है का उपयोग करें, StackOverflow में एक छवि मैं बजाय एक और एसवीजी भीतर embedding हूँ के रूप में उदाहरणों में शामिल करने के लिए, तो मैं मान्य XML सिंटैक्स का उपयोग करने की आवश्यकता है)

Answer 2

आप ' एक तरह के रूप में परिणत करना चाहते हैं जाएगा:

जावास्क्रिप्ट के साथ

:

#yourtarget { 
    transform:scale(2.0); 
    -webkit-transform:scale(2.0); 
} 

एक समूह टैग में अपने एसवीजी पृष्ठ लपेटें:

document.getElementById(yourtarget).setAttribute("transform", "scale(2.0)"); 

सीएसएस के साथ

के रूप में ऐसी और उसे लक्ष्य पूरे पृष्ठ हेरफेर करने के लिए:

<svg> 
    <g id="yourtarget"> 
    your svg page 
    </g> 
</svg> 

नोट: स्केल 1.0 100%

Answer 3

& चारों ओर खिलवाड़ है पाया इस सीएसएस बिंदु है जहां से ऊपर क्रोम ब्राउज़र में एसवीजी शामिल करने के लिए लगता है

div.inserted-svg-logo svg { max-width:100%; } 

इसके अलावा एफएफ + आईई 11.