svg 将在 Microsoft edge 中拉伸

Question

我创建了一个 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>

Answer 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 可以跨浏览器工作。因此，在此 post 中，您会发现 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>

Answer 2

我使用 background-size: contain 将保持宽高比的责任从 svg 渲染器转移到元素渲染。这不是问题的答案，而是我如何 proceeded/worked 解决问题的描述。

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/

svg 将在 Microsoft edge 中拉伸

svg will stretch in Microsoft edge

css

svg

microsoft-edge

添加：另一个罪魁祸首？