SVG在Microsoft Edge中会被拉伸。

Question

SVG在Microsoft Edge中会被拉伸。

csssvgmicrosoft-edge

3

我已经创建了一个 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;
}

这里是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>

- Anders Lindén

2

你能否同时发布 svg 的 xml 数据？你需要在它们上面设置 viewBox 和 width 或 height 属性，以便它们可以正确缩放，所有其他数据大多会被丢弃。 - somethinghere

@somethinghere 我现在已经添加了SVG数据并更正了CSS，使其反映JSFiddle。 - Anders Lindén

我必须说，svg属性中的width="100%"和height="100%"非常可疑。然而，删除这些属性并没有改变行为。 - Anders Lindén

实际上，基于百分比的宽度和高度对于SVG来说是无效的（或者至少不一致可用），它们需要width和height的值来创建正确的viewBox。 - somethinghere

2个回答

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/

- Anders Lindén

抱歉，但这里的答案正是我之前所描述的，只是您决定使用“包含”。就像我说的，SVG与其他任何图像一样，如果使用“100％100％”，其宽度和高度会在任何方向上拉伸。我已在Edge中测试了我的答案，它可以正常工作。 - somethinghere

我的 jsfiddle 在你的 Edge 浏览器中是什么样子？问题是如何使用 background-size: 100% 100% 来实现这一点。尽管使用了该背景大小，但以前的浏览器版本仍会呈现具有正确纵横比的 SVG。 - Anders Lindén

我的答案看起来与您的一样，只是没有被限制在一个较小的框中。 - somethinghere

背景大小 100% 100% 不保持纵横比 - 只有当您的盒子与图像的纵横比为1:1时才会出现这种情况。contain关键字可以使用，是的，我没有提到它，但我已经明确说明使用不同的背景大小（例如带有自动选项的背景大小）会产生不同且更可预测的结果。 - somethinghere

背景大小：100％100％在Edge之前实际上保留了纵横比，请在IE11中尝试第一个jsfiddle。它只是包含svg输出的元素，宽度和高度都为100％。保持纵横比的机制是SVG功能，而不是CSS，并且仅适用于SVG文件，而不是像素图像。 - Anders Lindén

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- somethinghere · Accepted Answer

首先，让我们清理一下你的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-width 和 y-height 值（但四舍五入）。您还需要 viewBox 属性以及一个 xmlns 标签（最后一个标签似乎可以不用，但无论如何都可以跨浏览器工作）。

这是我使用的测试页面（尽管我找到了许多文章说它可以使用 data:image/svg+xml;enctype=utf-8,/* URL 编码的 SVG 字符串 */ 将其转换为 base-64 样式字符串，但我无法使其正常工作），因此请在您自己的计算机上与上述代码结合使用！

<!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>