मैंने बहुत सारे संसाधन पढ़े, लेकिन मैं ब्राउज़र विंडो में फिट होने के लिए एसवीजी चित्र प्राप्त कर सकता हूं।
मुझे बताया गया था कि अगर मुझे आधुनिक मोबाइल ब्राउज़र में फिट होने वाले मोबाइल एप्लिकेशन में छवियों का उपयोग करना है, तो मुझे html5 पृष्ठों में SVG छवियों का उपयोग करना होगा।
मैं "एसवीजी छवि को काम करने के लिए प्रतीत नहीं कर सकता! मैं इसे इलस्ट्रेटर से बचा रहा हूं, फिर 100% चौड़ाई div के साथ html5 पेज में एम्बेड कर रहा हूं।
ऐसा करने के लिए सबसे अच्छा तरीका क्या है? किसी भी मदद के लिए धन्यवाद..
वैसे, मैं Jquery मोबाइल / HTML5 / CSS3 का उपयोग कर रहा हूं
<embed src="header.svg" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install" />
जब मैं इसे डिवाइस आकार में फिट करना चाहता हूं तो मुझे "व्यूबॉक्स" में एक निश्चित चौड़ाई और ऊंचाई कैसे निर्दिष्ट करनी चाहिए? मैं एक विशिष्ट आकार नहीं है
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">
<svg version="1.1" baseProfile="basic" id="Layer_1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="253px" height="60px" viewBox="0 0 253 60" xml:space="preserve">
<g>
<g>
<defs>............
उत्तर:
उत्तर № 1 के लिए 4यदि आपका दर्शक HTML 5 पार्सर वाले ब्राउज़र का उपयोग कर रहा है (अब व्यापक रूप से समर्थित है) आप सीधे एक svg टैग में किसी भी xml सामान की जरूरत नहीं है। आप एक वस्तु या एम्बेड टैग टैग की जरूरत नहीं है। इस बिंदु पर वह पुराना स्कूल है। और आप निश्चित रूप से डॉन "टी एक iFrame की जरूरत है।इसके अलावा, बस स्पष्ट करने के लिए, एसवीजी का jQuery के साथ कोई लेना-देना नहीं है, वास्तव में (वास्तव में jquery svv तत्वों के साथ काफी बुरी तरह से खेलता है)। बस सुनिश्चित करें कि आप html5 सिद्धांत का उपयोग कर रहे हैं, और इसे कुछ इस तरह लिखें:
<svg id="mycoolgraphic" viewBox="0 0 253 60" >
<g>
<g>
<defs>............
</g>
</g>
</svg>
सुनिश्चित करें कि आपके सभी टैग बंद हैं, और जैसा मान्य हैxml डॉन "टी टैब इंडेंट या रिक्ति का एक पूरा गुच्छा जोड़ें, जो केवल खाली पाठ नोड्स बनाएगा। बस इसे सभी बदसूरत छोड़ दें और एक साथ धूम्रपान करें। यह किसी भी जावास्क्रिप्ट काम को बाद में बहुत आसान बना देता है। यदि आप" इलस्ट्रेटर का उपयोग कर रहे हैं (जो सिर्फ है। ठीक है) आप शायद मुख्य svg टैग में से xml घोषणाओं में से कुछ में जाकर सफाई करना चाहेंगे। किसी भी स्पष्ट ऊँचाई और चौड़ाई को छोड़ दें यदि आप चाहते हैं कि तत्व उत्तरदायी हो। आप साधारण सीएसएस घोषणाओं के माध्यम से ऊंचाई और चौड़ाई को नियंत्रित कर सकते हैं:
#mycoolgraphic { height: 10em;width: 10em;}
उत्तरदायी svg करने में मुख्य चाल सेटिंग है preserveAspectRatio विशेषता। यह कुछ ऐसा है जिसे आपको जोड़ना होगा। "इलस्ट्रेटर से निर्यात किए गए ग्राफिक्स" के लिए कुछ भी शामिल नहीं है preserveAspectRatio।) यह विशेषता नियंत्रित करती है कि svg सामग्री (a) देखने का ढंग) को svg तत्व (svg) के भीतर बढ़ाया जाता है व्यूपोर्ट) का है। व्यूबॉक्स आनुपातिक रूप से निश्चित है।जब आपने इलस्ट्रेटर में कला बनाई थी, तो यह बाउंडिंग आयत थी। डॉन "इसके साथ गड़बड़ न करें जब तक कि आप बहुत निश्चित नहीं हैं कि आप जानते हैं कि आप क्या कर रहे हैं" svg तत्व जिसमें व्यूबॉक्स होता है, हालांकि, किसी भी html तत्व की तरह आकार हो सकता है, और preserveAspectRatio विशेषता दोनों के बीच संबंध का वर्णन करता है। MDN preserveAspectRatio पर लेख अच्छा है। कल्पना इस बिंदु पर आश्चर्यजनक रूप से पठनीय है।
उम्मीद है की यह मदद करेगा!