2009-07-11 18 views
12

के साथ HTML में इनलाइन एसवीजी, मैं कुछ मिश्रित HTML/SVG सामग्री बनाने और कुछ परेशानी होने का प्रयास कर रहा हूं। एचटीएमएल सामग्री अपेक्षित के रूप में दिखाई देती है, लेकिन इनलाइन एसवीजी नहीं है। तो, मैं कुछ प्रयोग करता हूँ।फ़ायरफ़ॉक्स 3.5

मुझे ऐसी साइटें मिलती हैं जिनमें इनलाइन एसवीजी के उदाहरण हैं, और वे मेरे सिस्टम पर सही ढंग से प्रस्तुत करते हैं। इसलिए, मैं "पृष्ठ स्रोत देखता हूं" और HTML/SVG को किसी अन्य स्थानीय फ़ाइल में कॉपी/पेस्ट करता हूं, और फ़ायरफ़ॉक्स में इस फ़ाइल को खोलता हूं। कोई इनलाइन एसवीजी दिखाई नहीं दे रहा है।

मैंने क्रोम के साथ एक ही प्रयोग की कोशिश की, एक ही परिणाम।

मुझे क्या याद आ रही है?

अद्यतन
थोड़ा सा पहचान में अपनी ओर से परिवर्तन: k मॉन्टगोमेरी -> kmontgom OpenID के उपयोग पर।

वैसे भी उन सभी को धन्यवाद जिन्होंने उत्तर दिया। सबसे अच्छा समाधान Response.ContentType को सेट करने में था; यह मुझे अब वेबफॉर्म दृष्टिकोण के साथ जारी रखने देता है।

मैंने .xml फ़ाइलों में शुद्ध एक्सएचटीएमएल सामग्री बनाने और उस सामग्री को पूरा करने के लिए एएसपी.नेट एमवीसी का उपयोग करने पर विचार किया था। मैं भविष्य में ऐसा कर सकता हूं।

अब, jQuery, एसवीजी के साथ आगे बढ़कर, और चीज कुछ करने के लिए।

सभी मदद के लिए धन्यवाद।

उत्तर

5

फ़ाइल नाम के लिए ".xml" नहीं ".html"

+0

धन्यवाद! यह काम करता है। अब अगला सवाल यह है कि एएसपी.NET को एचटीएम या .HTML –

+0

'के बजाय एक .XML फ़ाइल कैसे उत्पन्न करें' fraid मुझे उस – Greg

+0

k montgomery का उत्तर नहीं पता, मुझे लगता है कि आप एक माइम-प्रकार हेडर सेट कर सकते हैं , विवरण के लिए मेरा जवाब देखें। –

10

आदेश में यकीन है कि के लिए इनलाइन एसवीजी ब्राउज़रों में दिखाए जाने के लिए बनाओ, पेज एक्सएचटीएमएल मान्य होना चाहिए और आवेदन के साथ प्रस्तुत किया जाना चाहिए/xhtml + xml माइम-प्रकार सर्वर प्रतिक्रिया शीर्षलेख।

यह भी रूप में अच्छी तरह HTML पृष्ठ से इनलाइन एसवीजी सामग्री को खींचने के लिए, एक SVG Tiger छवि है कि यह भी इंटरनेट एक्सप्लोरर में देखी जा सकती है का एक उदाहरण देख संभव है (5.5+)

+0

एएसपी.NET उदाहरण का भी उपयोग कर सकते हैं: 'Response.ContentType = "एप्लिकेशन/xhtml + xml" ' –

+1

ध्यान दें कि यह नहीं होना चाहिए फ़ायरफ़ॉक्स के भविष्य के संस्करणों में एक मुद्दा। Http://hsivonen.iki.fi/test-html5-parsing/ – sdwilsh

+0

संदर्भ के लिए, यहां एक सरल पृष्ठ है जो एक्सएचटीएमएल + एकाधिक एसवीजी + जेएस दिखा रहा है: http://phrogz.net/SVG/convert_path_to_polygon.xhtml – Phrogz

3

के रूप में ग्रेग ने कहा, यह होने की जरूरत है एक फ़ाइल जो फ़ायरफ़ॉक्स एक एक्सएचटीएमएल फ़ाइल के रूप में पहचानती है, न केवल नियमित एचटीएमएल, जो कि नामकरण का नाम है। सर्वर-साइड ऐप से प्राप्त करने के लिए, आपको प्रतिक्रिया Content-type शीर्षलेख application/xhtml+xml पर सेट करने की आवश्यकता है।

13

एक विकल्प यदि आप एक्सएचटीएमएल नहीं करना चाहते हैं तो बेस 64 को एसवीजी डेटा एन्कोड करना है।

उदा।

<object type="image/svg+xml" 
     data="data:image/svg+xml;base64,PCFET0NUWVBFI...etc..."></object> 

मुझे लगता है कि शायद यह संभवतः आप अपनी स्थिति के लिए नहीं चाहते हैं, लेकिन फिर भी, दूसरों के लिए उपयोगी हो सकता है।

+1

इसे +1 करें मेरे लिए उपयोगी था! –

+1

यह एक दिलचस्प तंत्र है, लेकिन सीमित है (विशेष रूप से असंगत ब्राउज़र समर्थन के कारण)। यहां कुछ अतिरिक्त जानकारी: http://en.wikipedia.org/wiki/Data_URI_scheme – nobar

0

जैसा कि अन्य लोग ध्यान देते हैं, जब तक आप एक्सएचटीएमएल का उपयोग कर रहे हैं और आपके नेमस्पेस सही हैं, तो आप जाने के लिए अच्छे हैं - आप बस HTML में <svg> टैग का उपयोग कर सकते हैं।

मुझे परीक्षण में पाया गया कि यह केवल फ़ायरफ़ॉक्स 4 में वास्तव में अच्छा काम करता है और हाल ही में क्रोम बनाता है, लेकिन वाईएमएमवी। एक इंट्रानेट पर सामान के लिए जहां आप जानते हैं कि हर कोई एक सभ्य ब्राउज़र का उपयोग कर रहा है, यह ठीक है।

मैंने कुछ experimentation in generating inline SVG using JavaScript किया है। इसे जांचने के लिए स्वतंत्र महसूस करें, आपको कोड उपयोगी हो सकता है।

+0

यूआरएल उलझा हुआ है। –

+0

धन्यवाद लुईस, यह अभी तय है। –

1

यदि आप जावास्क्रिप्ट का उपयोग करके गतिशील रूप से एसवीजी उत्पन्न करते हैं तो यह इनलाइन काम करता है। बजाय:

<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1000" width="1000"> 
     <rect id="myrect" x="0" y="0" rx="0" ry="0" width="200" height="300" fill="yellow" stroke="purple" stroke-width="5" /> 
    </svg> 

आप लिखें:

<script> 
     var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); 
     svg.setAttribute("xmlns", "http://www.w3.org/2000/svg/"); 
     svg.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); 
     svg.setAttribute("height", "1000"); 
     svg.setAttribute("width", "1000"); 
     document.body.appendChild(svg); 
     var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); 
     rect.setAttribute("id", "myrect"); 
     rect.setAttribute("x", "0"); 
     rect.setAttribute("y", "0"); 
     rect.setAttribute("rx", "0"); 
     rect.setAttribute("ry", "0"); 
     rect.setAttribute("width", "200"); 
     rect.setAttribute("height", "300"); 
     rect.setAttribute("fill", "yellow"); 
     rect.setAttribute("stroke", "purple"); 
     rect.setAttribute("stroke-width", "5"); 
     svg.appendChild(rect); 
    </script> 

यह आदर्श नहीं है, लेकिन यह काम करने लगता है।

1

ASP.NET के साथ इस समस्या हो रही लोगों के लिए, आवेदन/xhtml + xml करने के लिए एचटीएमएल 5 को doctype और सामग्री प्रकार बदलने के लिए, मैं एफएफ 3.6 IE9 पर यह कोशिश की, और क्रोम 13:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
..... 
etc 

और कोड-बैक में:

protected void Page_Load(object sender, EventArgs e) 
{ 
this.Response.ContentType = "application/xhtml+xml"; 
}