使css背景圖像（svg）響應

我想使用SVG文件作爲背景圖像（css）。使css背景圖像（svg）響應

這裏是我的SVG：

<?xml version="1.0"?> 
<svg width="428" height="100" xmlns="http://www.w3.org/2000/svg"> 
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> 

<g> 
    <title>background</title> 
    <rect fill="none" id="canvas_background" height="102" width="430" y="-1" x="-1"/> 
    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> 
    <rect fill="url(#gridpattern)" stroke-width="0" y="1" x="1" height="400" width="580"/> 
    </g> 
</g> 
<g> 
    <title>Layer 1</title> 
    <text stroke="#000" transform="matrix(1.22606 0 0 1.22606 -24.7533 -46.6879)" opacity="0.3" font-style="italic" xml:space="preserve" text-anchor="left" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_1" y="87.150366" x="22.228393" stroke-width="0" fill="#000000">Hello world!</text> 
</g> 
</svg>

我http://b64.io編碼，並使用它像這樣：

#new-hello-world { 
    background-image: url(…); 
    background-repeat: no-repeat; 
}

現在我的問題是，SVG無響應。我該如何解決這個問題？

任何幫助將不勝感激。

編輯：

我已經試圖讓svg寬度和高度100％，但沒有奏效。

來源

2015-01-03 user3475602

您的'svg'代碼缺少id爲＃gridpattern的元素。請發佈整個代碼。 –

嘿，感謝您的幫助，但實際上，這是整個代碼。我使用這個編輯器：[editor.method.ac]（http://editor.method.ac）。 – user3475602

然後，您應該刪除'url（#gridpattern）'，因爲您的代碼中沒有任何模式定義，並將其替換爲某種顏色。 –

給<svg>元素一個viewBox屬性，例如viewBox = "0 0 428 100"儘管chipChocolate.py的建議viewBox="0 0 580 400"可能會更好地工作，具體取決於您想要查看的內容。

來源

2015-01-03 10:21:42

不應該是'viewBox =「0 0 580 400」'？ –

因爲他正在使用'width =「580」'和'height =「400」'作爲'rect'。 –

使css背景圖像（svg）響應

回答

相關問題