क्या एसवीजी सामग्री डिफ़ॉल्ट रूप से एम्बेडेड <svg> के बाहर दिखाई देनी चाहिए?

Question

अतीत में मैंने आईवी 9 में "फसल" (overflow: hidden) नहीं होने पर एसवीजी छवियों के संबंध में "कौन गलत था" के बारे में एक प्रश्न का उत्तर दिया, जहां अन्य सभी सहायक ब्राउज़रों ने ऐसा किया। जवाब here है।

आज, एचटीएमएल 5 बॉयलरप्लेट फिर से समीक्षा करते समय, मैंने देखा है कि वे वे कोड के इस बिट के साथ "[correct] overflow not being hidden in IE9" दावा:

svg:not(:root) { overflow: hidden; } 

मैं पुष्टि या कुछ अन्य की ओर इशारा करते द्वारा अपने मूल अनुसंधान को अस्वीकार करने के किसी के लिए देख रहा हूँ या तो एचटीएमएल 5 या एसवीजी चश्मा में ध्यान दें। मुझे कुछ भी नहीं मिला, लेकिन मैं यह सुनिश्चित करना चाहता हूं कि मुझे कुछ याद नहीं आ रहा है।

सबसे अच्छा मुझे मिल सकता है कि वे नियम 7 here लागू करने की कोशिश कर रहे हैं, लेकिन यह केवल img टैग या सीधे लोड होने पर एक एसवीजी दस्तावेज़ पर लागू होना चाहिए।

Answer 1

एसवीजी विनिर्देश इस में क्या कहना है: http://www.w3.org/TR/SVG/styling.html#UAStyleSheet

क्या फ़ायरफ़ॉक्स और क्रोम नहीं करने के लिए समान लगता है?

Answer 2

आपके मूल उत्तर को आपके द्वारा निर्दिष्ट आधारों का उपयोग करके मुझे लगता है (विशेष रूप से the spec का पांचवां और सातवां बुलेट बिंदु)।

यह अविश्वसनीय रूप से असंभव लगता है कि आईई सही है और वेबकिट और फ़ायरफ़ॉक्स नहीं हैं। हालांकि, जैसा कि आपको संदेह है कि सातवें बुलेट बिंदु भिन्नता कारक है।

आप Chrome में this test case लोड और एसवीजी निरीक्षण करने के लिए डेवलपर टूल का उपयोग करते हैं, तो आप देखेंगे:

(user agent stylesheet)

svg:not(:root), symbol, image, marker, pattern, foreignObject { 
    overflow: hidden; 
} 

लिए सक्षम "दिखाएँ उपयोगकर्ता एजेंट सीएसएस हैं "फायरबग में आप फ़ायरफ़ॉक्स में यह नियम देखते हैं:

svg.css (line 49) <System>

svg:not(:root), symbol, image, marker, pattern, foreignObject { 
    overflow: hidden; 
} 

अंत में, आप परीक्षण का मामला svg { overflow:hidden } तो आईई नेत्रहीन अन्य ब्राउज़रों से मेल खाता जोड़ने के लिए संपादित करता है, तो।

इस प्रकार, यह मेरे लिए प्रतीत होता है कि सभी तीन ब्राउज़रों कल्पना के अनुसार बर्ताव कर रहे हैं, लेकिन क्रोम/सफारी/एफएफ सभी यूए नियम है कि और अधिक बारीकी से क्या अधिकांश उपयोगकर्ताओं उम्मीद करेंगे मिलान नहीं करता।

अगर मैं अकेले अकेले छोड़ सकता हूं, तो यह वह जगह है जहां मैं यह जवाब रोकूंगा।

हालांकि, यदि आप edit the test case to add svg { overflow:visible }, तो क्रोम और फ़ायरफ़ॉक्स दोनों ओवरफ्लोल्ड सामग्री को 'ठीक से' नहीं दिखाते हैं। मुझे यकीन नहीं है कि इस डेटा के बाकी हिस्सों के साथ इस डेटा बिंदु को कैसे हल करें। :/