Question

我试图在插图画家中创建一个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;

但我做的任何事情似乎都无效。有任何想法吗？可能有一些我根本不了解svgs的基本原理？当我可以让它显示任何东西时，行为似乎是要么完全设置大小，要么设置大小，然后当我使窗口变小时，它缩小宽度并保持宽高比。

它应该看起来像这样大窗户：

The black curves on both sides are shapes inside the blue element with 950px width

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

background-size: cover;

在css中，svg中没有维度。

The right side has dissapeared

当我添加这样的设定宽度时：

background-size: 950px cover;

它显示如下：

Adding set width

如果我把窗口做得更小就是这样：

What the ? 哪个特别烦人。

修改

其他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>

Answer 1

找到我的问题的解决方案

使用

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%;                 
}

*以下是结果*

Full screen

大窗口

Small screen

小窗口

Answer 2

使用max-width CSS属性。试试这个：

#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%;                 
}

创建一个可以扩展到浏览器高度但具有设置宽度的svg

2 个答案: