创建一个缩放到浏览器高度但具有设定宽度的 svg
Posted
技术标签:
【中文标题】创建一个缩放到浏览器高度但具有设定宽度的 svg【英文标题】：Creating an svg that scales to the height of browser but has a set width 【发布时间】：2012-08-27 06:33:14 【问题描述】：我试图在 illustrator 中创建一个 svg 并将其用作背景图像以填充到页面的顶部和底部，但仍位于 950 像素宽的 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"
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 不了解的基本内容？当我可以让它显示任何东西时，行为似乎是它要么完全设置大小，要么设置大小，然后当我缩小窗口时，它会缩小宽度并保持纵横比。
不管窗口多大，它都应该是这样的：
但是当我让窗口高度变大时，它的一侧消失了，这是使用
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>
【问题讨论】：
【参考方案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%;
* 这是结果 *
大窗口
小窗口
【讨论】：
到目前为止，我已在 google chrome 21 和 ff 14 中测试了此功能【参考方案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%;
【讨论】：
包含div。此外，包含在另一个 div 中的 div 还是只是 body？
这只是给我一个黑屏，因为没有什么可以填补中间元素。
也没有使用更新的背景尺寸属性，仍然只是黑色以上是关于创建一个缩放到浏览器高度但具有设定宽度的 svg的主要内容，如果未能解决你的问题，请参考以下文章