css svg und Vektor-Effekt = "non-scaling-stroke" Browserkompatibilität

Question

Aus verschiedenen Quellen erhalte ich, dass Vektor-Effekt = "non-scaling-stroke" in Svg sollte in den aktuellen Versionen Opera, Firefox und Chrome funktionieren. (Nicht sicher über IE10).

Allerdings kann ich es nur in Opera und Firefox arbeiten, und dann nur wenn es direkt als Bild eingebettet ist, wenn es als Hintergrundbild in CSS skaliert wird, dann funktioniert es nicht. Meine Fragen

:

Warum nicht Chrom?

Warum nicht in Hintergrundbildern?

Gibt es eine Standardmethode, die ich in allen aktuellen Browsern verwenden kann?

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

Ich habe keine Ahnung, was unter der Haube vor sich geht, aber es gibt eine einfachere Lösung, zumindest für die Inline-SVG (Ich bin mir nicht sicher über Hintergründe). Wechsel:

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

zu:

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

Darüber hinaus müssen Sie sicherstellen, dass Sie viewBox defined für das SVG-Dokument.

Laut this answer ist die Verwendung von object sowieso eine bessere Vorgehensweise. Here ist eine gute Blog-Post, die (für Cross-Browser-Kompatibilität) empfiehlt:

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

ich diese letztere Option nicht getestet, aber wenn es es ist viel einfacher als this Lösung funktioniert.

EDIT: Ich entdeckte, dass SVGs als eingebettete Objekte "Hover" und "Klick" -Ereignisse störten, so dass ich schließlich geknickt und entschied, dass ich SVGs vollständig einbetten muss. Aber ich hatte kein Interesse an jeden einzelnen einfügen, so habe ich das folgende an der Spitze meiner JavaScript-Datei (ich bin mit JQuery):

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

Jetzt statt <img src="svg.svg"/> kann ich <div class="deferred-load" data-load="svg.svg"></div> schreiben.

Natürlich funktioniert dies nicht ohne aktiviertem Javascript. Aber es ist viel besser, als all das hässliche XML einzufügen.

Answer 2

Unter der Haube müssen UAs das SVG zeichnen und dann in ein Bitmap umwandeln, um ein Bild (einschließlich eines Hintergrundbildes) zu erstellen. Der einfachste Weg besteht darin, den Nicht-Bild-Rendering-Code wiederzuverwenden und dann die Bitmap zu skalieren, aber wenn die Bitmap skaliert wird, wird sie sowohl unscharf als auch nicht richtig skaliert. Der richtige Weg ist, herauszufinden, in welcher Größe Sie schließlich die Bitmap zeichnen wollen, und den SVG-Zeichenkode dazu zu bringen, darin zu zeichnen.

Diese bug wurde gerade in Firefox behoben.Sie können heute in einer Nightly versuchen oder warten auf die Veröffentlichung im September.