2013-02-13 8 views
5

Ich versuche, eine SVG auf Hintergrund-Bild zu verwenden wie:SVG in Opera mit CSS Hintergrund-Bild mit Skalierung

.logo 
{position: absolute; 
width: 300px; height: 300px; 
background-image: url(../img/logo.svg); 
background-size: 256px 256px; 
background-repeat: no-repeat;} 

Dies funktioniert auf Safari, Firefox, Chrome, aber nicht auf Opera und ich don bekomme das Problem nicht.

Beispiel Chrome 24:

[CHROME] (Ich bin so traurig, ich das Beispiel von Host gelöscht)

Beispiel Opera 12.14:

[OPERA] (Es tut mir leid löschte ich das Beispiel von Host)

UPDATE 1:

SVG Datei

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"> 
<g> 
    <path fill="#00A99D" d="M41.027,96.075H16.375v-54.84c0-10.062,2.636-18.258,7.91-24.586c3.032-3.647,6.888-6.547,11.568-8.7 
    c4.68-2.153,9.48-4.23,14.402-4.23c9.798,0,18.061,4.296,24.784,10.887c6.724,6.591,10.085,14.677,10.085,24.256 
    c0,9.316-3.341,17.357-10.019,24.124c-6.68,6.769-14.59,10.151-23.729,10.151c-1.495,0-3.691-0.154-6.591-0.462 
    c0,0,15.358-31.682,15.358-34.277c0-2.592-0.945-4.801-2.834-6.625c-1.891-1.823-4.153-2.735-6.79-2.735 
    c-6.328,0-9.491,4.373-9.491,13.117V96.075z"/> 
</g> 
<g> 
    <path fill="#003333" d="M67.922,9.087 M56.177,30.83c-1.147-0.565-2.048-1.283-3.411-1.283c-5.88,0-8.821,4.373-8.821,13.117 
    v53.411H21.038V41.741c0-17.062,2.45-18.258,7.351-24.586c6.874-8.876,18.079-15.234,29.436-12.2 
    c3.438,0.918,6.994,2.387,10.098,4.132"/> 
</g> 
<polyline fill="#003333" points="15.557,19.809 21.038,47 40,44 40,20 "/> 
</svg> 
+1

Die Quelle für Ihre SVG wäre wahrscheinlich auch hier hilfreich. – cimmanon

+0

Hinzugefügt Quelle von SVG – ricardopereira

+0

In der 'svg'-Tag, ändert sich die Breite und Höhe ohne Einheit (zB. Breite =" 100 "Höhe =" 100 ") Hilfe? – cimmanon

Antwort

5

Das Entfernen der width und height Attribute in der SVG macht es schön (in Opera 12 getestet).

+0

Perfekt! Danke vielmals. – ricardopereira