css svg e browser-effect = "non-scaling-stroke" compatibilità del browser

Question

Da varie fonti ho capito che vector-effect = "non-scaling-stroke" in svg dovrebbe funzionare nelle versioni correnti Opera, Firefox e Chrome. (Non sono sicuro di IE10).

Tuttavia, posso solo farlo funzionare in Opera e Firefox, e solo quando è incorporato direttamente come immagine, se è ridimensionato come immagine di sfondo in CSS, allora non funziona.

Le mie domande:

Perché non cromato?

Perché non nelle immagini di sfondo?

C'è un modo standard che posso usare in tutti gli ultimi browser?

A fiddle example.

HTML:

<div><img src="http://dl.dropbox.com/u/60476509/close.svg" /></div> 
<div><img id="one" src="http://dl.dropbox.com/u/60476509/close.svg" /></div> 
<div id="two"></div> 
<div id="three"></div> 

CSS:

#one { 
    width: 200px; 
    height: 200px; 
} 

#two { 
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg"); 
    height: 100px; /* native size */ 
    width: 100px; 
    background-size: contain;   
} 
#three { 
    background-image: url("http://dl.dropbox.com/u/60476509/close.svg"); 
    height: 200px; 
    width: 200px; 
    background-size: cover;   
}  

Answer 1

Non ho idea di quello che sta succedendo sotto il cofano, ma c'è una soluzione più facile, almeno per linea SVG di (non sono sicuro degli sfondi). Cambio:

<img src="svg-source.svg"/> 

a:

<object type="image/svg+xml" data="svg-source.svg"></object> 

Inoltre, è necessario assicurarsi di avere viewBox defined per il documento SVG.

Secondo this answer, l'utilizzo di object è comunque una buona pratica. Here è un post decente che raccomanda (per la compatibilità cross-browser):

<object type="image/svg+xml" data="svg-source.svg"> 
    <img src="png-version.png"/> 
</object> 

non ho ancora testato questa seconda opzione, ma se funziona è molto più semplice di quanto this soluzione.

EDIT: Ho scoperto che come oggetti incorporati, gli SVG interferivano con gli eventi di "passaggio del mouse" e "clic", quindi alla fine ho ceduto e ho deciso di incorporare pienamente gli SVG. Ma non avevo alcun interesse a incollare ogni singolo, così ho il seguente nella parte superiore del mio file javascript (sto usando JQuery):

$(document).ready(function() 
{ 
    $('.deferred-load').deferredLoad(); 
} 
$.fn.deferredLoad = function() 
{ 
    $(this).each(function() 
    { 
     $(this).load($(this).attr('data-load')); 
    }); 
} 

Ora, invece di <img src="svg.svg"/> posso scrivere <div class="deferred-load" data-load="svg.svg"></div>.

Naturalmente, questo non funziona senza Javascript abilitato. Ma è molto meglio che incollare tutto quel brutto XML.

Answer 2

Sotto il cofano Gli UA devono disegnare l'SVG e quindi trasformarlo in una bitmap per creare un'immagine (inclusa un'immagine di sfondo). Il modo più semplice per disegnarlo è riutilizzare il codice di rendering non immagine e quindi ridimensionare la bitmap, ma quando la bitmap viene ridimensionata diventa sfuocata e inoltre non rende correttamente il tratto non scalabile. Il modo giusto è quello di capire a che dimensioni vuoi disegnare la bitmap e dire al codice di disegno SVG di disegnarlo.

Questo bug è stato appena risolto in Firefox.Puoi provare in un Nightly oggi o attendere il rilascio a settembre.