svg viewbox विशेषता

Question

मैं अपने आधिकारिक दस्तावेजों से svg सीख रहा हूं, ऐसी रेखा है। मुझे यह नहीं मिला है, अगर इसमें पहले से width और height विशेषता है, तो viewBox="0 0 1500 1000" में इसे फिर से निर्दिष्ट करने का क्या मतलब है? यह कहता है, "एक पीएक्स इकाई को एक उपयोगकर्ता इकाई के बराबर परिभाषित किया जाता है। इस प्रकार," 5px "की लंबाई आधिकारिक दस्तावेज़ों में" 5 "की लंबाई के समान होती है, इस प्रकार यह दृश्यबॉक्स 1500px चौड़ा है और 1000 ऊंचाई दृश्य, जो 300px और 200px से अधिक है। तो यह पहली जगह चौड़ाई और ऊंचाई मान को परिभाषित क्यों करता है?

<svg width="300px" height="200px" version="1.1" 
     viewBox="0 0 1500 1000" preserveAspectRatio="none" 
     xmlns="http://www.w3.org/2000/svg"> 

Answer 1

चौड़ाई और ऊंचाई <svg> कितनी बड़ी है। व्यूबॉक्स नियंत्रण करता है कि इसकी सामग्री कैसे प्रदर्शित की जाती है ताकि viewBox = "0 0 1500 1000" 512 (1500/300 = 5 और 1000/200 = 5) के कारक द्वारा <svg> तत्व की सामग्री को स्केल करेगा और सामग्री 1 होगी/5 आकार वे बिना दृश्य के होंगे बॉक्स लेकिन <svg>

कल्पना कीजिए कि आपके पास लोचदार सतह है और इसे 4 बराबर टुकड़ों में काट लें। यदि आप 3 टुकड़ों को फेंक देते हैं तो आपको सतह मिल गई है जो मूल सतह का 1/4 आकार है। यदि अब आप सतह को फैलाते हैं और इसे मूल सतह के समान आकार बनाते हैं तो सतह पर सब कुछ आकार के दोगुना हो जाएगा। इस तरह व्यूबॉक्स और चौड़ाई/ऊंचाई संबंधित हैं।

Answer 2

यदि आप व्यूबॉक्स निर्दिष्ट नहीं करते हैं, तो तत्व में सभी यूनिटलेस संख्याओं को पिक्सेल माना जाता है। (और एसवीजी सेमी से पिक्सल जैसी इकाइयों से रूपांतरण के लिए 9 0 डीपीआई या पिक्सल प्रति इंच मानता है।)

एक व्यूबॉक्स आपको तत्वों में यूनिटलेस नंबरों को "उपयोगकर्ता इकाइयों" का अर्थ देता है और यह निर्दिष्ट करता है कि उन इकाइयों को आकार में कैसे मैप किया गया है। सादगी के लिए, केवल एक्स निर्देशांक, यानी एक शासक पर विचार करें। आपका व्यूबॉक्स कहता है कि आपके शासक के पास svg की 200 पिक्सेल आकार चौड़ाई से मेल खाने के लिए 1500 इकाइयां होंगी।

0 से 1500 (यूनिटलेस, यानी उपयोगकर्ता इकाइयों) से एक पंक्ति तत्व 200 पिक्सेल को खींचा जाएगा, जो एसवीजी ड्राइंग की चौड़ाई में है।

(और के बाद से एसवीजी संकल्प की हानि के बिना स्केलेबल है, पिक्सल वास्तव में असली दुनिया में बहुत मतलब नहीं है जब कोई उपयोगकर्ता ज़ूम या बाहर।)

यह एक समन्वय परिवर्तन, प्रकार के।

मेरा सुझाव है कि आप "एसवीजी अनिवार्य" जैसी पुस्तक से सीखें, लगभग $ 10 का उपयोग किया जाता है, जिससे मैं इस जवाब को संक्षेप में उद्धृत करता हूं।

Answer 3

डिफ़ॉल्ट

<svg width="300" height="200"> 

svg ग्रिड के "शासक" द्वारा पिक्सेल में है (कि svg में सभी आकृति पिक्सेल में मापा जाता है)

लेकिन आप अपने खुद के इकाइयों का उपयोग करने के viewBox उपयोग कर सकते हैं चाहता हूँ उस के लिए attr:

<svg width="300" height="200" viewBox="0 0 1500 1000"> 

इसका मतलब है कि:

क्षैतिज अक्ष: 1500 (अपने चौड़ाई इकाई) = 300px => 1 (अपने चौड़ाई इकाई) = 300/1500px = 1/5px

ऊर्ध्वाधर अक्ष: 1000 (अपनी ऊंचाई इकाई) = 200px => 1 (अपनी ऊंचाई इकाई) = 200/1000 पिक्सेल = 1/5px

• अब svg में सभी आकृति स्केल करेगा:

उनकी चौड़ाई => नीचे पैमाने पर 1/5px (1/5 < 1 के पैमाने पर) उत्पत्ति की तुलना में।

अपनी ऊंचाइयों के भी 1/5px (1/5 < 1 => नीचे पैमाने पर) के लिए पैमाने पर मूल