inline svg in html - come degradare con grazia?

Vedere il codice qui sotto - Sto cercando di includere inline svg nel mio sito web. Sto seguendo a neat suggestion per usare l'elemento switch svg in modo che si degradi con grazia sui browser più vecchi. L'idea è che i browser che supportano svg usano il primo elemento nel blocco switch; quelli che non ignorano tutti i tag svg e mostrano semplicemente l'img sepolto nel secondo elemento (cioè il tag foreignobject) del blocco switch.inline svg in html - come degradare con grazia?

Funziona davvero bene ... a parte che il mio SVG (che è di spartiti) include necessariamente elementi di testo e ottengono reso (così come il foreignObject) dai browser più vecchi.

Ironia della sorte è facile affrontare questo in IE8 e sotto usando i commenti condizionali.

Per altri browser più vecchi ho un javascript di lavoro all'interno del foreignobject che ridefinisce la classe del testo svg. Funziona ... ma sembra un vero trucco.

C'è un modo migliore per farlo (migliore javascript, una soluzione css, un altro modo di fare il testo svg ...)?

Comunque ecco le ossa nude del codice:

<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>

fonte

2012-05-06 Chris Walshaw

mi piacerebbe guardare RaphaelJS, nel caso in cui ha disposizione per il rilevamento funzione - o forse Modernizr. Neanche usato, ma sarebbero entrambi valsi la pena. – halfer

Quali altri vecchi browser oltre a IE8 che non supportano SVG stai cercando di supportare? –

@halfer - Modernizr aggiungerà una classe 'svg' o' no-svg' all'intero documento, che può essere controllato in codice o con un selettore CSS. Non risolverà automaticamente il problema, ma lo rende abbastanza facile da controllare. –

Ecco un'idea per per i browser diversi da IE8 e precedenti per un CSS- (che devono Shiv basate JS di riconoscere l'elemento text.) unica soluzione,

<!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>

l'idea è che i browser che supportano SVG inline, farlo mettendo gli elementi SVG nel namespace "http://www.w3.org/2000/svg", che possono poi essere indirizzato nel css.

Testato in Firefox 12, IE9, Chrome 18 Opera 11.6, che mostra SVG e Firefox 3.6 e Safari 5.0 che mostrano il fallback.

JSFiddle a http://jsfiddle.net/rGjKs/

fonte

2012-05-06 11:15:28 Alohci

grazie! Funziona anche su un vecchio browser Android che mostra il fall-back. La libreria Modernizr sembra interessante ma mi piace molto questa soluzione in quanto è molto più semplice ed evita javascript. –

Che cosa significa il carattere pipe '|', in 'svg | text'? – Sathvik

@Sathvik: è solo il carattere separatore tra il prefisso dello spazio dei nomi e il nome locale dell'elemento. Più o meno equivalente al carattere ":" (due punti) in XML. – Alohci

inline svg in html - come degradare con grazia?

risposta

Problemi correlati