我画了一个小的（水平/宽度）svg作为我网站导航的背景。 我的网站导航发生了100％的浏览器视口，我希望svg图像填充100％的空间。
所以，使用css我将导航的背景（.nav）设置为nav.svg，但后来我看到（当我在浏览器中打开html文件时）svg不是导航的全宽，但是在宽度很小的时候，我画了它。
如何让SVG拉伸并填充整个导航宽度（页面的100％）？
以下是导航所在的html文件的代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Distributed Horizontal Menu</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style type="text/css">
*{
margin:0;
padding:0;
}
.nav {
margin:0;
padding:0;
min-width:42em;
width:100%;
height:47px;
overflow:hidden;
background:transparent url(nav.svg) no-repeat;
text-align:justify;
font:bold 88%/1.1 verdana;
}
.nav li {
display:inline;
list-style:none;
}
.nav li.last {
margin-right:100%;
}
.nav li a {
display:inline-block;
padding:13px 4px 0;
height:31px;
color:#fff;
vertical-align:middle;
text-decoration:none;
}
.nav li a:hover {
color:#ff6;
background:#36c;
}
@media screen and (max-width:322px){
/* styling causing first break will go here*/
/* but in the meantime, a test */
body{
background:#ff0000;
}
}
</style></head><body>
<ul class="nav">
<!--[test to comment out random items]
<li> <a href="#">netscape 9</a></li>
[the spacing should be distributed]-->
<li> <a href="#">internet explorer 6-8</a></li>
<li> <a href="#">opera 10</a></li>
<li> <a href="#">firefox 3</a></li>
<li> <a href="#">safari 4</a></li>
<li class="last"> <a href="#">chrome 2</a> </li>
</ul>
</body></html>
以下是svg的代码：
<?xml version="1.0" encoding="utf-8"?>
<!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="321.026px" height="44.398px" viewBox="39.487 196.864 321.026 44.398"
enable-background="new 39.487 196.864 321.026 44.398" xml:space="preserve">
<path fill="url(#SVGID_1_)" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316
c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027V238.721z"/>
<path opacity="0.1" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028
v39.316c0,1.12,0.812,2.028,1.813,2.028h316.375c1,0,1.812-0.908,1.812-2.028v-39.316C360,198.284,359.189,197.376,358.188,197.376z
M358.75,238.721c0,0.415-0.264,0.779-0.562,0.779H41.813c-0.3,0-0.563-0.363-0.563-0.779v-39.316c0-0.414,0.263-0.777,0.563-0.777
h316.375c0.301,0,0.562,0.363,0.562,0.777V238.721z"/>
<path opacity="0.5" fill="#FFFFFF" enable-background="new " d="M358.188,197.376H41.813c-1.001,0-1.813,0.908-1.813,2.028v1.461
c0-1.12,0.812-2.028,1.813-2.028h316.375c1.002,0,1.812,0.908,1.812,2.028v-1.461C360,198.284,359.189,197.376,358.188,197.376z"/>
<g id="seperators">
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="104.5" y1="197.375" x2="104.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="103.5" y1="197.375" x2="103.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="105.5" y1="197.375" x2="105.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="167.5" y1="197.375" x2="167.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="166.5" y1="197.375" x2="166.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="168.5" y1="197.375" x2="168.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="231.5" y1="197.375" x2="231.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="232.5" y1="197.375" x2="232.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="230.5" y1="197.375" x2="230.5" y2="240.75"/>
<line fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" x1="295.5" y1="197.375" x2="295.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="294.5" y1="197.375" x2="294.5" y2="240.75"/>
<line opacity="0.1" fill="none" stroke="#FFFFFF" stroke-width="1.0259" stroke-miterlimit="10" enable-background="new " x1="296.5" y1="197.375" x2="296.5" y2="240.75"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.0259" stroke-miterlimit="10" d="M360,238.721c0,1.121-0.812,2.029-1.812,2.029
H41.813c-1.001,0-1.813-0.908-1.813-2.029v-39.316c0-1.119,0.812-2.027,1.813-2.027h316.375c1.002,0,1.812,0.908,1.812,2.027
V238.721z"/>
</svg>
我感谢并欢迎任何评论，帮助和建议。
提前致谢！
答案 0 :(得分：0)
尝试添加背景尺寸元素。 （背景大小：100％100％;）
.nav {
margin:0;
padding:0;
min-width:42em;
width:100%;
height:47px;
overflow:hidden;
background:transparent url(nav.svg) no-repeat;
background-size: 100% 100%;
text-align:justify;
font:bold 88%/1.1 verdana;
}