创建一个可以扩展到浏览器高度但具有设置宽度的svg
blu*_*ail 6 html css html5 svg background-image
我试图在插画家中创建一个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的基本原理？当我可以让它显示任何东西时,行为似乎是它要么完全设置大小,要么设置大小然后当我使窗口变小时它缩小宽度并保持宽高比.
它应该看起来像这样大但窗口是:
但是当我使窗户高度变大时,它的侧面会消失,这就是使用
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>
找到了我的问题的解决方案
运用
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%;
}
*结果如下*
大窗户
小窗口
| 归档时间： |
|
| 查看次数： |
4310 次 |
| 最近记录： |