2013-02-13 96 views
5

我試圖使用的背景圖像的SVG,如:SVG在Opera中使用CSS背景圖像縮放與

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

這適用於Safari瀏覽器,火狐,Chrome,但不是在Opera和我不沒有解決問題。

例鉻24:

[CHROME](對不起,我刪除從主機的示例)

例歌劇12.14:

[OPERA](對不起,我刪除從主機的示例)

UPDATE 1:

SVG文件

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

您的SVG的源代碼在這裏可能也會有所幫助。 – cimmanon 2013-02-13 18:24:11

+0

添加了SVG的源代碼 – ricardopereira 2013-02-13 18:45:03

+0

在'svg'標籤中,是否將寬度和高度更改爲無單位(如.' width =「100」height =「100」')有幫助? – cimmanon 2013-02-13 19:35:03

回答

5

在svg中刪除widthheight屬性使得它很好地呈現(在Opera 12中測試)。

+0

完美!非常感謝。 – ricardopereira 2013-02-14 15:55:48