svg 将在 Microsoft 边缘延伸答案

【问题标题】：svg will stretch in Microsoft edgesvg 将在 Microsoft 边缘延伸
【发布时间】：2015-10-26 10:36:46
【问题描述】：

我创建了一个 svg，它将在 Microsoft Edge 和 Google Chrome 之前的 Internet Explorer 中扩展。

在 Edge 中，它会双向拉伸（没想到，div 的背景图像应该是 100% 100%，但 svg 呈现本身不应该）

在 Google Chrome 中，它保持纵横比（预期）并与顶部对齐（不是预期，应垂直居中）。

为什么我的两个期望都失败了？

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>

【问题讨论】：

您也可以发布svg xml 数据吗？您需要为它们设置一个viewBox 和一个width 或height 属性才能正确扩展，所有其他数据大多被丢弃。
@somethinghere 我现在已经添加了 svg 数据并更正了 css，使其反映了 jsfiddle。
我必须说，svg 属性中的 width="100%" 和 height="100%" 非常可疑。删除这些属性并不会改变行为。
事实上，基于百分比的宽度和高度对 SVG 无效（或者至少不能始终使用）——它们需要 width 和 height 的值来创建正确的 viewBox。

标签： css svg microsoft-edge

【解决方案1】：

首先，让我们清理您的 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>

【讨论】：

我已经找到了一种解决方法，正如我自己的“答案”所建议的那样。但是，我尝试在 jsfiddle.net/szs0e29j/9 中使用您清理过的 svg。它在 chrome 中进行了垂直居中，但没有改变边缘的行为。

【解决方案2】：

我使用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/

【讨论】：

对不起，这里的答案正是我上面描述的，只是你决定使用contain。就像我说的，SVG 和其他图像一样，如果您使用100% 100%，它的宽度和高度会在任一方向上拉伸。我已经在 Edge 中测试了我的答案并且它有效。
我制作的 jsfiddle 在您的 Edge 中看起来如何？问题是如何使用 background-size: 100% 100% 来做到这一点。尽管使用了该背景大小，但以前的浏览器版本已以正确的纵横比呈现 svg。
和我的答案一模一样，除了没有限制在一个小盒子里。
我会勾选你的答案，从未见过你使用包含。感谢您的帮助！
Background-size 100% 100% 不保留纵横比 - 仅当您的盒子与图像的纵横比为 1:1 时。 contain 关键字有效，是的，我没有提到它，但我已经明确指出，使用不同的背景大小（如自动）会产生不同且更可预测的结果。