6

我试图在 illustrator 中创建一个 svg 并将其用作背景图像以填充页面的顶部和底部，但仍位于 950px 宽的 div 内，并且我遇到了无穷无尽的麻烦。

<?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="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

这是我的 svg，你可以看到插画家给了它宽度和高度元素。我删除了这些，所以我可以将它们设置在 css 中：

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;                    
}

我尝试了各种不同的组合，从 svg 中删除大小并在 css 中添加样式，例如：

background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;

但我所做的一切似乎都不起作用。有任何想法吗？可能有一些我对 svg 不了解的基本内容？当我可以让它显示任何东西时，行为似乎是它要么完全设置大小，要么设置大小，然后当我缩小窗口时，它会缩小宽度并保持纵横比。

它应该看起来像这样，无论窗口多大：

两边的黑色曲线是蓝色元素内部的形状，宽度为 950px

但是当我使窗口高度变大时，它的侧面消失了，这是使用

background-size: cover;

在css中，svg中没有尺寸。

右边消失了

当我像这样添加设置宽度时：

background-size: 950px cover;

它显示如下：

添加设置宽度

如果我让窗口变小，这样做：

什么？ 这尤其令人讨厌。

编辑

其余的 css 和 HTML 看起来像这样

CSS

/* Main Containers */
.center{
                    margin: 0px auto;
                    width: 1200px;
                    height: 100%;
}
#left{
                    width: 150px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}
#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: cover;

}
#right{
                    width: 100px;
                    height: 100%;
                    display: block;
                    float: left;
                    background: #000000;
}

HTML

<body>
    <div class="center">


        <div id="left">
            <!-- Header -->

            <!-- END Header -->

        </div>


        <!-- Nav -->
        <div id="nav">

        </div>
        <!-- END Nav -->

        <div id="middle">


        </div>

        <div id="right">

        </div>
        <!-- Footer -->

        <!-- END Footer -->

    </div>
</body>
4

2 回答 2

5

找到了我的问题的解决方案

使用

preserveAspectRatio="none"

在 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"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>

尺寸已完全从 svg 中删除。不要删除 viewBox 或 enableBackground 属性——这些很重要。

像这样的CSS：

#middle{
                    width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;
                    background-size: 100% 100%;                 
}

* 这是结果 *

全屏

大窗户

小屏幕

小窗户

于 2012-09-02T02:09:33.533 回答
0

使用max-widthCSS 属性。试试这个：

#middle{
                    max-width: 950px;
                    margin: 0px;
                    height: 100%;
                    float: left;
                    display: block;
                    background: url(../images/l.svg) no-repeat left top #00aeef;   
                    background-size: 950px 100%;                 
}
于 2012-09-02T00:05:13.623 回答