0

我画了一个小的（水平/宽度）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>&nbsp; <a href="#">netscape&nbsp;9</a></li>
[the spacing should be distributed]-->
    <li>&nbsp; <a href="#">internet&nbsp;explorer&nbsp;6-8</a></li>
    <li>&nbsp; <a href="#">opera&nbsp;10</a></li>
    <li>&nbsp; <a href="#">firefox&nbsp;3</a></li>
    <li>&nbsp; <a href="#">safari&nbsp;4</a></li>
    <li class="last">&nbsp; <a href="#">chrome&nbsp;2</a> &nbsp; &nbsp;</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>

我感谢并欢迎任何和所有的评论、帮助和建议。

提前致谢！

4

1 回答 1

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;
    }
于 2012-06-06T06:25:13.893 回答