एचटीएमएल कोड में एसवीजी फ़ाइल एम्बेड करते समय विभिन्न ब्राउज़रों पर समान परिणाम कैसे उत्पन्न करें?

मुझे अपने पिछले प्रश्न Overlay SVG diagrams on google map के लिए समाधान शुरू करना शुरू हो गया है।एचटीएमएल कोड में एसवीजी फ़ाइल एम्बेड करते समय विभिन्न ब्राउज़रों पर समान परिणाम कैसे उत्पन्न करें?

लेकिन मेरे पास एक और (छोटी) समस्या है। मैं फ़ायरफ़ॉक्स 3.5 और सफारी 4 (मैक पर) का उपयोग कर रहा हूं, और जब मैं एक्सएचटीएमएल में एसवीजी एम्बेड कर रहा हूं, तो मेरे पास एक ही परिणाम नहीं है।

मैं <object> या <embedded> तत्वों का उपयोग कर सकता हूं (लेकिन मुझे लगता है कि अंतिम व्यक्ति को बहिष्कृत किया गया है)। मैं उन्हें इस तरह उपयोग करता हूं:

<div id="map_canvas" style="width: 900px; height: 900px"> 
    <object data="test.svg" width="100%" height="100%" type="image/svg+xml"/> 
</div>

और एसवीजी का आकार और पैमाने फ़ायरफ़ॉक्स और सफारी के साथ समान नहीं है। मेरे एसवीजी में, width, height और viewBox परिभाषित किए गए हैं।

क्या सभी ब्राउज़रों के साथ एक ही परिणाम होने का कोई तरीका है (मुझे आईई की परवाह नहीं है जो एसवीजी का समर्थन नहीं करता है ..., इसलिए "सभी ब्राउज़रों" का अर्थ फ़ायरफ़ॉक्स के कम से कम नवीनतम संस्करणों से है, ओपेरा और सफारी) ?? हो सकता है कि मैं कुछ परिभाषित करना भूल गया?

संपादित करें: मैं यह भी देखा कि <object> साथ, एसवीजी एफएफ के साथ पारदर्शी, लेकिन सफारी के साथ पारदर्शी नहीं है ... :( वहाँ एक "मानक" जिस तरह से एक एसवीजी ??

धन्यवाद शामिल करने के लिए है आपकी मदद के लिए

स्रोत

2009-07-01 ThibThib

प्रश्न के लिए धन्यवाद। इससे मुझे svg फ़ाइलों के लिए अपने क्रॉस ब्राउज़र समर्थन को हल करने में मदद मिली। शर्म समर्थन अधिक संगत नहीं है। –

गुजर में, एक और पहलू यह है कि एसवीजी फ़ाइलों के ब्राउज़र को रेंडरिंग में अन्तर को स्पष्ट कर सकते हैं 'पत्र-spacing' विशेषता है। यह वर्तमान में Firefox में समर्थित नहीं है, https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/letter-spacing#Usage_Note देख –

मैं केवल मिल Firefox और Safari (Windows पर) जब एक viewbox svg में परिभाषित किया गया है के बीच आकार में विभिन्न परिणाम।

एक समाधान है

एचटीएमएल में ऑब्जेक्ट टैग में पूर्ण मूल्य (पिक्सेल)
एसवीजी फ़ाइल में चौड़ाई और ऊंचाई विशेषता को सापेक्ष मानों (उदा। 100%)

फिर एफएफ और सफारी दोनों एक ही व्यवहार दिखाते हैं! यदि आप अपनी स्थिति पर लागू होते हैं, तो आपको यह कोशिश करनी चाहिए।

संपादित करें: अपने नए सवालों के संबंध में: - सफारी में पारदर्शिता एक बग हो रहा है: bugs Webkit - एम्बेड करने के लिए मानक तरीका: मुझे नहीं लगता कि एक मानक तरीका है। आप ऑब्जेक्ट, आईफ्रेम, आईएमजी या एसवीजी (इनलाइन घोषणा) का उपयोग कर सकते हैं।

यदि आप इसे प्रत्येक ब्राउज़र में काम करना चाहते हैं, तो आपको शायद ब्राउजर स्नीफिंग का उपयोग करना होगा और ब्राउज़र के आधार पर ऑब्जेक्ट या आईएमजी टैग का उपयोग करना होगा। या आपको iframes आज़माएं। क्योंकि उन्हें सफारी और फ़ायरफ़ॉक्स में पारदर्शी पृष्ठभूमि माना जाता है। webdev ब्राउज़र समर्थन में (लेकिन ओपेरा के बारे में पता नहीं)

हमेशा की तरह बड़ी समस्या है, जैसा कि आप देख सकते हैं: svg support

(आप छवि क्लिक करते हैं, आप विस्तार से svg सुविधाओं के लिए जाँच कर सकते हैं)

स्रोत

2009-07-02 05:55:40

धन्यवाद यह काम करता है। लेकिन पारदर्शिता के बारे में? यदि आप एसवीजी के नीचे कुछ डालते हैं, तो सफारी के साथ एक सफेद पृष्ठभूमि है, लेकिन एफएफ के साथ नहीं। और अगर मैं तत्व का उपयोग अपने एसवीजी एम्बेड करने के लिए, यह (पृष्ठभूमि के बिना) काम करता है सफारी के साथ नहीं, बल्कि एफएफ (कि कारण है कि GGroundOverlay एफएफ साथ काम नहीं करता है, यह एक का उपयोग करता एसवीजी एम्बेड करने के लिए है के साथ - देखना गूगल मानचित्र के साथ ओवरले एसवीजी) – ThibThib

पर मेरा पहला सवाल आप पारदर्शिता मुद्दे के बारे में कुछ संकेत दे दी है। मुझे बताओ कि यदि आप इस समस्या का समाधान कर सकते .. –

ठीक इन सभी प्रश्नों के उत्तर के लिए धन्यवाद। मैं शायद ब्राउजर के आधार पर टैग चुनूंगा। लिंक (और वेबकिट बग) को इंगित करने के लिए धन्यवाद! – ThibThib

यदि आप एसवीजी के आईई प्रतिपादन के लिए svgweb का उपयोग कर रहे हैं तो आप अधिकांश ब्राउज़रों के लिए एक ही व्यवहार प्राप्त कर सकते हैं। यह मानता है कि आपका एसवीजी इंटरैक्टिव नहीं है (जावास्क्रिप्ट शामिल है), इसके विपरीत इसे किसी भी ब्राउज़र के लिए एम्बेड करने की आवश्यकता है।

<html> 
    <head> 
    <!--[if IE]>--><script type="text/javascript" src="javascripts/svg/svg.js"></script><!--<![endif]--> 
    </head> 
    <body> 
    <div id="map_canvas" style="width: 900px; height: 900px"> 
     <!--[if !IE]>--><img src="test.svg" width="900" height="900" /><!--<![endif]--> 
     <!--[if lt IE 9]><object src="test.svg" classid="image/svg+xml" width="900" height="900"></object><![endif]--> 
     <!--[if gte IE 9]><object data="test.svg" type="image/svg+xml" width="900" height="900"></object><![endif]--> 
    </div> 
    </body> 
</html>

स्रोत

2011-09-23 09:18:49 Martin

एचटीएमएल कोड में एसवीजी फ़ाइल एम्बेड करते समय विभिन्न ब्राउज़रों पर समान परिणाम कैसे उत्पन्न करें?

उत्तर

संबंधित मुद्दे