ओवरफ़्लो: एसवीजी

Question

पर दृश्यमान <svg> तत्वों पर यह overflow: visible सेट संभव है?

This simple example on jsfiddle प्रत्येक ब्राउजर में ब्रेक करता है, (क्रोम और फ़ायरफ़ॉक्स के कुछ संस्करण) क्योंकि वे overflow: hidden जैसे कार्य करते हैं।

क्या कोई मुझे बता सकता है कि क्या एसवीजी समर्थन अभी भी ऐसी सरल चीजें करने के लिए अपरिपक्व है, या यदि मैं अपने कोड में कुछ गलत कर रहा हूं?

overflow: visible का मेरा व्यावहारिक उपयोग ग्राफ पर एक रेंज-अक्ष है, जहां -0 टिक का निचला आधा कट हो जाता है।

Answer 1

मुझे लगता है कि आपको HTML में इनलाइन < svg> तत्वों का अर्थ है, यदि ऐसा है तो यह केवल एक कार्यान्वयन सीमा है। IE9 + < svg> तत्वों पर अनुमति देता है, लेकिन अब तक अन्य ब्राउज़र AFAIK नहीं करते हैं।

एक संभावित कामकाज (जो वास्तव में इसे पहली जगह आईएमएचओ में किया जाना चाहिए) viewBox निर्दिष्ट करना है जो svg के अंदर समन्वय प्रणाली को परिभाषित करता है। फिर आप इस समन्वय प्रणाली के अंदर सामान खींचते हैं। अगर चीजें फिसल जाती हैं (या दूसरे शब्दों में यदि तत्व viewBox क्षेत्र के बाहर हैं), तो तदनुसार viewBox चौड़ाई और/या ऊंचाई बढ़ाएं।

यदि आप अपने विशेष viewBox के लिए एक अच्छा डिफ़ॉल्ट के बारे में सोचते हैं, तो [0 0 width height] (जहां चौड़ाई और ऊंचाई आपके एसवीजी का आकार है), तो बस ऊंचाई को बढ़ाएं जब तक कि नीचे की टिक पूरी तरह से दिखाई न दे।

2014 अद्यतन: यह अभी भी ब्राउज़र में थोड़ा असंगत है, लेकिन यह वहां जा रहा है। इनलाइन एसवीजी तत्वों पर फ़ायरफ़ॉक्स और आईई overflow:visible का समर्थन करते हैं, और ब्लिंक (ओपेरा 23/क्रोम 36) ने इसके लिए भी समर्थन जोड़ा, विवरण के लिए bugreport देखें।

Answer 2

overflow: visible 
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/ 

एसवीजी के लिए एक विशाल बॉक्स छाया जोड़ना, या विशाल छाया के साथ एक DIV में एसवीजी इसे हल जोड़ने। क्रोम में मैंने देखा कि ओवरफ्लो को बॉक्स-छाया सीमा पर फिसल जा रहा है।