css svg-und vector-effect="non-scaling-stroke" - browser-Kompatibilität

Aus verschiedenen Quellen entnehme ich, dass die vector-effect="non-scaling-stroke" im svg-sollte funktionieren in den aktuellen Versionen von Opera, Firefox und Chrome. (Nicht sicher, IE10).

Kann ich jedoch erst machen, damit es funktioniert in Opera und Firefox, und dann auch nur wenn es direkt eingebunden ist, wie ein Bild, wenn es skaliert wird, als ein Hintergrundbild in CSS dann funktioniert es nicht.

Meine Fragen:

Warum nicht Chrom?

Warum nicht im hintergrund Bilder?

Ist es eine standard-Art, die ich verwenden können, das in allen aktuellen Browsern?

Eine Geige beispielsweise.

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

Funktioniert in Chrome, wenn Sie den SVG-inline: jsfiddle.net/42mq6, die nicht sicher sind, wie Sie arbeiten, um Ihr problem aber.
Danke, das ist eine Verbesserung, auch wenn ein Streit.

InformationsquelleAutor SystemicPlural | 2013-03-29

css svg

4

Ich habe keine Ahnung, was Los ist unter der Haube, aber es gibt eine einfachere Lösung, zumindest für die inline-SVG (nicht sicher über die Hintergründe). Ändern:
```
<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 haben viewBox definiert für das svg-Dokument.

Laut diese Antwort, mit object ist besser der Praxis sowieso. Hier ist ein anständiges blog-post, die empfiehlt (für cross-browser-Kompatibilität):
```
<object type="image/svg+xml" data="svg-source.svg">
    <img src="png-version.png"/>
</object>
```
Habe ich nicht getestet, diese letztere option, aber wenn es funktioniert, es ist viel einfacher, als diese Lösung.

EDIT: ich habe entdeckt, dass als eingebettete Objekte, SVGs wurden, sich mit "hover" und "click" - events, also habe ich endlich geschnallt und beschlossen, dass muss ich einbetten SVGs voll. Aber ich hatte kein Interesse an dem einfügen jedes einzelnen, so habe ich die folgenden an der Spitze meiner javascript-Datei (ich verwende JQuery):
```
$(document).ready(function()
{
    $('.deferred-load').deferredLoad();
}
$.fn.deferredLoad = function()
{
    $(this).each(function()
    {
        $(this).load($(this).attr('data-load'));
    });
}
```
Nun statt <img src="svg.svg"/> ich schreiben kann <div class="deferred-load" data-load="svg.svg"></div>.

Natürlich, dies funktioniert nicht ohne Javascript. Aber es ist viel besser als das einfügen, dass alle hässlichen XML.

InformationsquelleAutor galdre
0

Unter der Haube UAs zeichnen müssen dem SVG und schalten Sie ihn dann in eine bitmap, um ein Bild zu erstellen (inklusive Hintergrundbild). Der einfachste Weg ist, um es zu zeichnen ist, die Wiederverwendung der nicht-Bild-rendering-code und dann skalieren der bitmap, aber wenn die bitmap skaliert es wird sowohl verschwommen und auch nicht Rendern, non-scaling-stroke richtig. Der richtige Weg ist, um herauszufinden, welche Größe Sie wollen endlich zeichnen Sie die bitmap an und sagen Sie den SVG-code zum zeichnen in das.

Diese bug wurde gerade behoben, in Firefox. Sie können versuchen, in einem Nächtliche heute, oder warten Sie für die Freigabe im September.

InformationsquelleAutor Robert Longson

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.