मैं यहां विस्तृत "प्रतीक" विधि का उपयोग कर एक एसवीजी स्प्राइट शीट का उपयोग करने की कोशिश कर रहा हूं।ऊंचाई: एसवीजी पर ऑटो काम नहीं कर रहा
http://css-tricks.com/svg-sprites-use-better-icon-fonts/
मेरे एचटीएमएल बहुत सरल है।
<svg><use xlink:href="/images/iconSprite.svg#camera"/></svg>
और यहाँ एसवीजी फ़ाइल से एक उदाहरण प्रतीक है
<symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol>
समस्या मैं कर रहा हूँ यह है कि जब मैं सीएसएस का उपयोग एसवीजी की ऊंचाई 64px को एसवीजी तत्व की चौड़ाई सेट करने के लिए स्वचालित रूप से 150 पिक्सेल पर सेट हो जाता है। मैंने ऊंचाई निर्धारित करने की कोशिश की है: ऑटो; और ऊंचाई: 100%; एसवीजी तत्व पर लेकिन इससे कोई फर्क नहीं पड़ता। इसे काम करने का एकमात्र तरीका ऊंचाई निर्धारित करना है: 64 पीएक्स; जो मैं नहीं करना चाहता क्योंकि मेरे आइकनों का पहलू अनुपात हमेशा वर्ग नहीं हो सकता है। मैं जो करना चाहता हूं वह स्वचालित रूप से एसवीजी को अपने मूल पहलू अनुपात में स्केल करता है, इसलिए 4: 3 आइकन (जैसा कि व्यूबॉक्स द्वारा परिभाषित किया गया है) स्वचालित रूप से 300px की ऊंचाई प्राप्त करेगा यदि मैं चौड़ाई 400px पर सेट करता हूं।
मैंने एसवीजी स्केलिंग और पहलू अनुपात को संरक्षित करने के लिए कई मार्गदर्शिकाएं पढ़ी हैं और कुछ आईएमजी तत्व का उपयोग करते समय समाधान हैं लेकिन मुझे इनलाइन एसवीजीएस के लिए कोई नहीं मिल रहा है, या यूएसई के साथ बाहरी एसवीजी का उपयोग नहीं कर रहा है।
कोई भी ऐसे समाधान को जानता है जो IE9 + और Android 4.0+ सहित सभी ब्राउज़रों में काम करता है?