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/

相关问题
最新问题