首页 文章

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

提问于
浏览 次
6

我试图在插画家中创建一个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 ?
哪个特别讨厌 .

EDIT

其余的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>
html css html5 svg background-image

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

    *** Here is the result ***

    Full screen

    大窗户

    Small screen

    小窗口

    回复于
  • 0

    使用 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%;                 
}
    回复于

相关问题