svg将在微软边缘延伸

时间:2015-10-26 10:36:47

标签: css svg microsoft-edge

我创建了一个svg,它将在Microsoft Edge和Google Chrome之前的Internet Explorer中延伸。

  • 在Edge中,它将向两个方向伸展(不是预期的,div的背景图像应该是100%100%,但svg再现本身不应该)

it output

  • 在谷歌浏览器中,它保持纵横比(预期)并与顶部对齐(不是预期的,应垂直居中)。

chrome output

为什么我的两个期望失败?

svg有一个名为<svg>的xml节点,其中包含以下属性(使用文本编辑器添加):

preserveAspectRatio="xMidYMid meet"

CSS

div
{
    resize: both;
    overflow: auto;
    background: url("https://www.dropbox.com/s/o050kltcraffr46/logo_preserve_mid_mid.svg?dl=1") no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

http://jsfiddle.net/szs0e29j/4/

SVG数据(根据要求):

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="Lager_1"
   x="0px"
   y="0px"
   preserveAspectRatio="xMinYMin meet"
   viewBox="0 0 372.4 38.7"
   style="enable-background:new 0 0 372.4 38.7;"
   xml:space="preserve"
   inkscape:version="0.48.4 r9939"
   width="100%"
   height="100%"
   sodipodi:docname="logo.svg"><metadata
   id="metadata47"><rdf:RDF><cc:Work
       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
   id="defs45" /><sodipodi:namedview
   pagecolor="#ffffff"
   bordercolor="#666666"
   borderopacity="1"
   objecttolerance="10"
   gridtolerance="10"
   guidetolerance="10"
   inkscape:pageopacity="0"
   inkscape:pageshadow="2"
   inkscape:window-width="978"
   inkscape:window-height="629"
   id="namedview43"
   showgrid="false"
   inkscape:zoom="0.76799141"
   inkscape:cx="379.5689"
   inkscape:cy="204.62955"
   inkscape:window-x="256"
   inkscape:window-y="55"
   inkscape:window-maximized="0"
   inkscape:current-layer="Lager_1" />
<style
   type="text/css"
   id="style3">
    .st0{fill:#006633;}
    .st1{fill:#2FAC66;}
</style>


<path
   class="st0"
   d="m 3.5393357,4.5729924 c 0,0 117.9056743,44.3370146 159.8334743,8.1788026 96.58369,-15.3993842 169.82631,-5.3997844 201.21601,0 0,0 -166.90922,-8.5807957 -162.58254,13.199471 C 142.44634,42.550602 65.098047,36.617023 3.5393357,4.5729924 z"
   id="path37"
   inkscape:connector-curvature="0"
   style="fill:#006633"
   sodipodi:nodetypes="ccccc" />


</svg>

2 个答案:

答案 0 :(得分:9)

首先,让我们清理你的SVG以简化它 - 来自多个来源的元信息的输出组合使得很难确定问题:这基本上就是你的svg:

<svg viewBox="0 0 372.4 38.7" width="375" height="40" xmlns="http://www.w3.org/2000/svg">
  <path d="m 3.5393357,4.5729924 c 0,0 117.9056743,44.3370146 159.8334743,8.1788026 96.58369,-15.3993842 169.82631,-5.3997844 201.21601,0 0,0 -166.90922,-8.5807957 -162.58254,13.199471 C 142.44634,42.550602 65.098047,36.617023 3.5393357,4.5729924 z" fill="#006633" />
</svg>

然而,重要的一点是,您的width 需要基于像素的值 - 否则缩放将不会始终如一。我注意到,对于较旧的IE,最好实际预定义height。我使用了viewBox属性中使用的x宽度和y高度值(但是向上舍入)。您还需要 viewBox属性,以及xmlns标记(最后一个,我似乎记得它没有工作,但无论如何,这可以跨浏览器工作)。

这是我使用的测试页面(我无法将其转换为base-64样式字符串,即使我发现许多文章说它可以与data:image/svg+xml;enctype=utf-8,/* URL encoded SVG string */一起使用,但我无法将其转换为()),请在您自己的计算机上结合以上代码尝试以下代码!

<!doctype html>
<html>
<head>
	<style type="text/css">
		body, html { height: 100%; }
		body { 
			background: url('mySVG.svg');
			background-size: contain;
		}
	</style>
</head>
<body>
    <h1>There is nothing on this page, it requires a seperate SVG file you can find higher up in this Stack Overflow Post.</h1>
</body>
</html>

我已经在IE9,Edge,Safari 8和Chrome中测试了这个,这个SVG可以跨浏览器工作。因此,在这篇文章中,您将找到SVG几乎无处不在的最低要求。

另外:另一个罪魁祸首?

您对CSS的期望存在问题。当你假设你的svg在被绘制到背景时只是一个图像时,Edge的行为绝对有意义。 background-size: 100% 100%会延伸任何图片。所以要居中并且拉伸它,使用auto

div {
    resize: both;
    overflow: auto;
    background: url("url.svg") 50% 50% no-repeat;
    // This is full height
    background-size: auto 100%;
    // This is stretching it
    background-size: 100% 100%;
    // This is full width
    background-size: 100% auto;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

这是一个显示我的意思的快速示例:

html, body { height: 100%; }
body { margin: 0; padding: 0; }
pre {
  display: block;
  width: 100%;
  height: 33%;
  height: calc((100% - 2px) / 3);
  margin-bottom: 1px solid #000;
  box-sizing: border-box;
  background: url(http://placehold.it/100x100);
  background-position: 50% 50%;
  margin: 0; 
  padding: 0;
}
pre#bg1 {
  background-size: 100% auto;
}
pre#bg2 {
  background-size: auto 100%;
}
pre#bg3 {
  background-size: 100% 100%;
  border: none;
}
<pre id="bg1">background-size: 100% auto;</pre>
<pre id="bg2">background-size: auto 100%;</pre>
<pre id="bg3">background-size: 100% 100%;</pre>

答案 1 :(得分:0)

我通过使用background-size: contain将责任从svg渲染器保持到元素渲染。这不是问题的答案,而是对我如何处理/解决问题的描述。

div
{
    resize: both;
    overflow: auto;
    background: url("https://www.dropbox.com/s/o050kltcraffr46/logo_preserve_mid_mid.svg?dl=1") no-repeat;
    background-size: contain;
    background-position: center center;
    width: 100px;
    height: 100px;
    border: 1px solid #000;
}

更新了jsfiddle:http://jsfiddle.net/szs0e29j/7/