2013-04-12 7 views
12

मैं ईव ऑनलाइन के लिए एक इन-गेम ब्राउज़र RoR ऐप बना रहा हूं। मेरे ऐप की आवश्यकताओं में से एक ग्राफवीज़ द्वारा उत्पन्न एक एसवीजी ग्राफ प्रदर्शित कर रहा है। मुझे इस माहौल में मेरी आवश्यकताओं को पूरा करने में कुछ समस्याएं आ रही हैं।इनलाइन एसवीजी बनाम <object> एम्बेडेड

कोई आधिकारिक दस्तावेज की पूर्व संध्या के IGB के लिए उपलब्ध है, लेकिन विकी इंगित करता है:

इन-गेम ब्राउज़र नई EVE ऑनलाइन (कोड नाम Moondoggie) एक प्रौद्योगिकी ढेर दो तत्वों के संयोजन पर आधारित है:

Awesomium: एक मिडलवेयर परत जो 3 डी इंजन द्वारा डेटा को पारदर्शी डेटा के रूप में प्रदान की जाती है। Awesomium Khrona सॉफ्टवेयर द्वारा विकसित किया गया है।

क्रोमियम: एक मिडलवेयर परत जो इंटरप्रोसेस संचार, वेबपृष्ठ प्रतिपादन, HTTP संचार, और वेब ब्राउज़र लिखने के लिए आवश्यक सभी अन्य मूलभूत बातें प्रदान करती है। ऐप्पल के वेबकिट ढांचे पर आधारित यह स्वयं ही है। क्रोमियम मुख्य रूप से Google द्वारा चैंपियन किया गया एक ओपन-सोर्स प्रोजेक्ट है।

इस वजह से, Moondoggie Acid3 परीक्षण पास करने में सक्षम है और इस प्रकार पूर्ण HTML 4.01 और CSS3 विनिर्देशों का समर्थन कर सकता है।

मुझे अपने ऐप के जावास्क्रिप्ट तक पहुंचने के लिए एसवीजी में शामिल लिंक की आवश्यकता है। <embed> या <object> के साथ इसे एम्बेड करना एसवीजी को मेरी जेएस फाइलों के दायरे से बाहर रखता है।

<embed> या <object> का उपयोग करते हुए डीईईएस इन-गेम ब्राउज़र में svg को ठीक से प्रस्तुत करता है। जब यह नीचे की तरह है, तो यह नीचे है, यह टेक्स्ट की एक पंक्ति प्रदर्शित करता है जिसमें एसवीजी से टेक्स्ट तत्व शामिल हैं।

अद्यतन यहां मैं कहां हूं। मुझे पूरा यकीन है कि इनमें से अधिकतर अनावश्यक है, क्योंकि मैंने अपने विचार के अंदर render file: का उपयोग करके कोई अंतर नहीं देखा है। मुझे लगता है कि माइम प्रकार पंजीकरण answer_to के साथ उपयोग के लिए अधिक है, लेकिन मुझे सच में यकीन नहीं है कि इस परिदृश्य में इसका उपयोग कैसे किया जाए।

मुख्य दृश्य के स्निपेट:

<%= render "map/map" %> 

आंशिक दृश्य फ़ाइल:

<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:svg="http://www.w3.org/2000/svg"> 
<head> 
    <title>Embedded SVG</title> 
</head> 
    <body> 
     <%= render file: @map.output_file_path %> 
    </body> 
</html> 

config/initializers/mime_types.rb:

Mime::Type.register "image/svg+xml", :svg 

मुझे समझ नहीं आता क्यों यह renders <object> टैग के अंदर ठीक है लेकिन इनलाइन नहीं होने पर। मैं अपने मुख्य दृश्य में <object> के अंदर पर्यावरण का अनुकरण कैसे करूं? या, मैं अपने जावास्क्रिप्ट कार्यों में <object> टैग पहुंच कैसे दे सकता हूं?

+0

क्या इसका मतलब यह है कि यह वेबकिट आधारित ब्राउज़र HTML5 का समर्थन नहीं करता है? एक्सएचटीएमएल 4 एक विकल्प का उपयोग कर रहा है? प्री-एचटीएमएल 5 के लिए, मेरे अनुभव में एक्सएचटीएमएल वास्तव में इसे काम करने का सबसे आशाजनक तरीका है। –

+0

'HTML5 के लिए प्रोटोटाइप समर्थन' है लेकिन ऐसा लगता है कि यह हिट या मिस है। मैं बहुत पक्का नहीं हूँ। यह सचमुच सभी दस्तावेज इस ब्राउज़र पर क्या करता है और इसका समर्थन नहीं करता है। मैं एक्सएचटीएमएल से वास्तव में परिचित नहीं हूं, और न ही मेरे पास डॉक्टरेट पर अच्छा संभाल है, लेकिन मैं इसे देख रहा हूं: http://www.w3.org/QA/2002/04/valid-dtd-list.html । मुझे लगता है कि मुझे एक्सएचटीएमएल का उपयोग करने के लिए ' 'के बजाय इनमें से किसी एक का उपयोग करने की आवश्यकता होगी? – sicks

+0

बस एक विचार है। Google चार्ट्स क्या करता है यह देखने लायक हो सकता है। वे एसवीजी और जावास्क्रिप्ट का बहुत भारी उपयोग करते हैं, ताकि आप वहां कुछ विचार प्राप्त कर सकें। शायद आप विचारों के लिए इंटरैक्टिव गैलरी https://developers.google.com/chart/interactive/docs/gallery पर पाई चार्ट में खोद सकते हैं। मुझे लगता है कि वे सीधे टैग का उपयोग करते हैं, जो सब कुछ गुंजाइश में रखता है। – Phil

उत्तर

4

मूल दस्तावेज़ से < ऑब्जेक्ट> या < एम्बेड> के अंदर दस्तावेज़ तक पहुंचना संभव है। यह एसवीजी चीजों में से एक है (एसीआईडी ​​3 अभी भी परीक्षण करता है।

Here's an example पैरेंट एचटीएमएल दस्तावेज़ में एक स्क्रिप्ट से एक svg दस्तावेज़ को संशोधित करने के तरीके के बारे में।

+0

ऑब्जेक्ट/एम्बेड को माता-पिता से ईवेंट श्रोताओं की आवश्यकता होती है। यही कारण है कि मैं पहले इनलाइन का उपयोग कर रहा था। क्या आप ईवेंट श्रोताओं को '' के अंदर टैग पर जोड़ सकते हैं जो मेरे मूल पृष्ठ से कॉल फ़ंक्शन? – sicks

+0

हां। इवेंट श्रोताओं को 'elm.addEventListener' के साथ जोड़ें और उसके बाद उस समारोह में जो ईवेंट को आप कॉल कर सकते हैं जैसे 'window.parent.yourFunctionInMainDocument (...)',, इस उदाहरण के समान थोड़ा: http: //dahlström.net /svg/html/from-svg-to-parent-html-script.html। –

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