एचटीएमएल में इनलाइन एसवीजी - कैसे शानदार ढंग से गिरावट?

नीचे दिए गए कोड को देखें - मैं अपनी वेबसाइट में इनलाइन एसवीजी शामिल करने की कोशिश कर रहा हूं। मैं svg स्विच तत्व का उपयोग करने के लिए a neat suggestion का पालन कर रहा हूं ताकि यह पुराने ब्राउज़र पर शानदार ढंग से घट जाए। विचार यह है कि एसवीजी का समर्थन करने वाले ब्राउज़र स्विच ब्लॉक में पहले तत्व का उपयोग करते हैं; वे जो सभी svg टैगों को अनदेखा नहीं करते हैं और केवल स्विच ब्लॉक के दूसरे तत्व (यानी विदेशी तत्व टैग) में दफन आईएमजी दिखाते हैं।एचटीएमएल में इनलाइन एसवीजी - कैसे शानदार ढंग से गिरावट?

यह वास्तव में अच्छी तरह से काम करता है ... सिवाय इसके कि मेरे svg (जो शीट संगीत है) को आवश्यक रूप से टेक्स्ट तत्व शामिल हैं और वे पुराने ब्राउज़र द्वारा प्रदान किए जाते हैं (साथ ही साथ विदेशी मुद्रा)।

विडंबना यह है कि आईई 8 में और सशर्त टिप्पणियों का उपयोग करके इसे कम करना आसान है।

अन्य पुराने ब्राउज़रों के लिए मेरे पास एक विदेशी जावास्क्रिप्ट के अंदर एक जावास्क्रिप्ट काम है जो svg टेक्स्ट की कक्षा को फिर से परिभाषित करता है। यह काम करता है ... लेकिन यह एक असली हैक की तरह लगता है।

क्या ऐसा करने का एक बेहतर तरीका है (बेहतर जावास्क्रिप्ट, एक सीएसएस समाधान, svg पाठ करने का दूसरा तरीका ...)?

<html> 
<head> 

<!-- this deals with elements using the svgtext class in old IE browsers --> 
<!--[if lte IE 8]> 
<style type="text/css"> 
.svgtext { display: none; } 
</style> 
<![endif]--> 
<style type="text/css"> 
.donotdisplay { display: none; } 
</style> 

</head> 
<body> 

<svg ...> 
<switch> 
<g> 
<!-- the svg goes here --> 
<text class="svgtext">this gets rendered unless I deal with it</text> 
</g> 
<foreignObject ...> 
<script type="text/javascript"> 
window.onload=function(){ 
    var inputs=document.getElementsByTagName('text'); 
    for(i=0;i<inputs.length;i++){ 
    inputs[i].className='donotdisplay'; 
    } 
} 
</script> 
<!-- the replacement img tag goes here --> 
</foreignObject> 
</switch> 
</svg> 

</body> 
</html>

स्रोत

2012-05-06 Chris Walshaw

पर मैं सुविधा पता लगाने के लिए प्रावधान नहीं है कि इस मामले में RaphaelJS को देखो चाहते हैं, - या शायद Modernizr। या तो इस्तेमाल नहीं किया जाता है, लेकिन वे दोनों जाने के लायक होंगे। – halfer

आईई 8 के अलावा अन्य पुराने ब्राउज़र जो एसवीजी का समर्थन नहीं करते हैं, क्या आप समर्थन करने की कोशिश कर रहे हैं? –

@ हेलफर - मॉडर्निज़र पूरे दस्तावेज़ में 'svg' या' no-svg' क्लास जोड़ देगा, जिसे कोड में या सीएसएस चयनकर्ता के साथ चेक किया जा सकता है। यह स्वचालित रूप से समस्या को ठीक नहीं करेगा, लेकिन यह जांचना बहुत आसान बनाता है। –

एक CSS- के लिए यहाँ IE8 के अलावा अन्य ब्राउज़र और पहले के लिए के लिए एक विचार है:

वैसे भी यहाँ कोड के नंगे हड्डियों है (जो जे एस आधारित शिव की जरूरत text तत्व पहचान करने के लिए।) एकमात्र समाधान,

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test Case</title> 

<!--[if lte IE 8]> 
    <script type="text/javascript"> 
     document.createElement("text"); 
    </script> 
<![endif]--> 

    <style type="text/css"> 
     @namespace svg "http://www.w3.org/2000/svg"; 
     text { display: none; } 
     svg|text { display: inline; } 
    </style> 
    </head> 
    <body> 

    <svg> 
     <switch> 
     <g> 
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/> 
      <text x="20" y="120">this gets rendered unless I deal with it</text> 
     </g> 
     <foreignObject> 
      <p>Use an SVG capable browser</p> 
     </foreignObject> 
     </switch> 
    </svg> 

    </body> 
</html>

विचार है कि यहाँ ब्राउज़रों कि एसवीजी इनलाइन समर्थन करते हैं, "http://www.w3.org/2000/svg" नेम स्पेस में एसवीजी तत्वों डाल कर ऐसा करते हैं जो तब कर सकते हैं है सीएसएस में संबोधित किया जाना चाहिए।

फ़ायरफ़ॉक्स 12, आईई 9, क्रोम 18 ओपेरा 11.6 में परीक्षण किया गया, जो एसवीजी दिखाता है, और फ़ायरफ़ॉक्स 3.6 और सफारी 5.0 जो गिरावट दिखाता है।

JSFiddle http://jsfiddle.net/rGjKs/

स्रोत

2012-05-06 11:15:28 Alohci

धन्यवाद! एक पुराने एंड्रॉइड ब्राउज़र पर भी काम करता है जो फॉल-बैक दिखाता है। Modernizr लाइब्रेरी दिलचस्प लगती है लेकिन मुझे इस समाधान को बहुत पसंद है क्योंकि यह बहुत आसान है और जावास्क्रिप्ट से बचाता है। –

पाइप वर्ण '|' का मतलब है, 'svg | text' में? – Sathvik

@Sathvik - यह केवल नामस्थान उपसर्ग और तत्व के स्थानीय नाम के बीच विभाजक चरित्र है। एक्सएमएल में ":" (कोलन) चरित्र के बराबर या कम समकक्ष। – Alohci

एचटीएमएल में इनलाइन एसवीजी - कैसे शानदार ढंग से गिरावट?

उत्तर

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