2013-02-13 17 views
5

मैं की तरह पृष्ठभूमि छवि पर एक एसवीजी उपयोग करने के लिए कोशिश कर रहा हूँ स्केलिंग के साथ सीएसएस पृष्ठभूमि छवि का उपयोग कर:एसवीजी

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

यह सफारी, फ़ायरफ़ॉक्स, क्रोम पर काम करता है, लेकिन ओपेरा और मैं डॉन पर नहीं समस्या नहीं है।

उदाहरण क्रोम 24:

[CHROME] (मैं बहुत माफी चाहता, मैं मेजबान से उदाहरण नष्ट कर दिया हूँ)

उदाहरण ओपेरा 12.14:

[ओपेरा] (मैं बहुत माफी चाहता हूँ , मैं मेजबान से उदाहरण)

अद्यतन नष्ट कर दिया 1:

एसवीजी फ़ाइल

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

आपके एसवीजी का स्रोत शायद यहां सहायक भी होगा। – cimmanon

+0

एसवीजी – ricardopereira

+0

का जोड़ा स्रोत 'svg' टैग में, चौड़ाई और ऊंचाई को यूनिट रहित (उदाहरण के लिए' चौड़ाई = "100" ऊंचाई = "100" ') मदद करता है? – cimmanon

उत्तर

5

एसवीजी में width और height गुणों को हटाने से यह अच्छी तरह प्रस्तुत होता है (ओपेरा 12 में परीक्षण किया जाता है)।

+0

बिल्कुल सही! बहुत बहुत धन्यवाद। – ricardopereira