SVG 无法在 IE 中正确缩放 - 有额外的空间答案

【问题标题】：SVGs not scaling properly in IE - has extra spaceSVG 无法在 IE 中正确缩放 - 有额外的空间
【发布时间】：2018-10-03 04:54:47
【问题描述】：

我决定为我的一个项目改用 svg 符号 - 但需要它们响应式。主要思想是不要有多个http请求，所以我正在考虑将所有SVG合并到一个SVG中，定义符号并使用它们如下：

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet" style="width:100%;">
    <use xlink:href="#mys"></use>
  <svg>
</div>

这是一个 jsfiddle，检查 IE 中的不同行为（我检查了 11，但读到 9 也有多个问题）： http://jsfiddle.net/ws472q71/

在我的一生中，我无法让它正常工作。上面的代码在 Firefox 和 Chrome 中正常工作，但在 IE 中失败。我阅读了有关 IE 问题的信息，但找不到任何可行的方法。

我做错了什么？

是否有任何其他类似的解决方案可以将 SVG 合并到一个文件中并将它们用作响应式图像？

谢谢！

【问题讨论】：

SVG Stacks 适合你吗？
不，现在还为时过早。我可以没有ie8支持，但不能没有Android支持。感谢您指出这一点。

标签： html css svg

【解决方案1】：

正如您所发现的，IE 存在一个错误，即如果您不提供宽度和高度，IE 将无法正确缩放 SVG。

要让它在 IE 中运行，您可以使用 Nicolas Gallagher 发现的技巧 (?)。

http://nicolasgallagher.com/canvas-fix-svg-scaling-in-internet-explorer/

技巧使用<canvas> 元素。 IE 确实正确缩放画布元素。因此，如果您将一个与 SVG 放在 <div> 中，则 SVG 最终将具有正确的大小。您只需为画布提供与 SVG 相同的纵横比即可。

<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

使用 CSS

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

canvas {
    display: block;
    width: 100%;
    visibility: hidden;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

<svg style="display:none;">
<defs>
<symbol id="mys">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#3F77BC" d="M222.1,77.7h-10.3c0.1-0.8,0.2-1.4,0.2-2.3
        c0-8.5-6.9-15.4-15.4-15.4c-8.5,0-15.4,6.9-15.4,15.4c0,0.9,0.1,1.5,0.2,2.3h-9.3v4h-24.9v-5.2H89.4c0-0.3,0-0.6,0-0.9
        C89.4,67.1,82.5,60,74,60s-15.4,6.9-15.4,15.4c0,0.3,0,0.6,0,0.9h-6.2V60.7h4.3l5.3-5.3h22.8L74.3,44.9l-13.5-3.6l0.5-1.7
        l-16.5-4.4c-0.3,0.1-0.7,0.2-1,0.2l0,21.4h2v7.2c0,0-2,0.6-1.9,1.3c0.1,0.7,4.1,2.6,3.4,5.5c-0.6,2.9-1.6,4.8-4.4,4.5
        c-2.7-0.3-3.4-1.4-3.4-2.6c-0.1-1.2,0-3,0-3L38,67.9c0,0,2-0.5,2.6,1.1c0.6,1.5-0.2,2.7,0.6,3.5c0.8,0.8,4.1,1.4,4.1-1.1
        c0-2.5-0.5-2.4-2.1-3.6c-1.7-1.2-3.4-2.8-3.4-3.3c0-0.5-0.1-7.7-0.1-7.7h2.1l0-21.7c-1.4-0.7-2.5-2.1-2.5-3.8
        c0-2.3,1.9-4.2,4.2-4.2c2,0,3.6,1.4,4.1,3.2l15.3,4.1l0.4-1.6l55.8,15.1h28.1c0,0,0-23.5,0-26.2c0-2.7,2.1-2.6,2.1-2.6
        s32.5-0.5,35.1,0.5c2.7,1,3.3,3.7,3.3,3.7h-2l5,11.6c0,0,7.3,4.6,17.6,7.6c10.3,3,13.6,7.6,13.6,7.6l-1,17.6l1.3,2V77.7z
         M81.5,46.8l8.6,8.6h9.3l2.9-2.9L81.5,46.8z M175.5,25l-17.4-0.1v12.6h9.6l2.7,2.7h6.6L175.5,25z M183,23.7h-4c0,0,2,6.6,3,9.9
        s0.9,4.2,2.7,4.2c1.9,0,4.2,0,4.2,0L183,23.7z M74.2,63.8c6.8,0,12.3,5.5,12.3,12.3S81,88.4,74.2,88.4c-6.8,0-12.3-5.5-12.3-12.3
        S67.4,63.8,74.2,63.8z M196.6,63.8c6.8,0,12.3,5.5,12.3,12.3s-5.5,12.3-12.3,12.3s-12.3-5.5-12.3-12.3S189.8,63.8,196.6,63.8z"/>
</symbol>
</defs>
</svg>
<div style="position:relative;width:100%;background:blue;">
  <canvas width="254" height="108"></canvas>
  <svg class="mys" viewBox="0 0 254 108" preserveAspectRatio="xMaxYMax meet">
    <use xlink:href="#mys"></use>
  </svg>
</div>

无论您是想让它匹配宽度还是高度，这个技巧都有效。

【讨论】：

精彩的答案。与此同时，我自己意识到我可以给 svg 绝对定位，但不能避免必须为父相对元素使用填充底部。这效果更好！ :) 谢谢！
您是否将画布元素的宽度和高度设置为与 SVG 相同？如果不明确设置高度和宽度，就没有办法做到这一点吗？我希望能够交换具有不同纵横比的 SVG，而无需不断重新计算宽度和高度。
对我来说，它还可以通过将 CSS 中的宽度设置为 1em 来工作，这样我就可以使用 font-size 属性缩放 svg。适用于图标 :)
我没有使用 canvas 元素，而是在包装 div 上使用 ::before 元素，并将底部填充设置为纵横比以实现相同的效果。保存引入一个 hacky 画布元素。 ::before{ content:""; display:block; width:100%; padding-bottom:42.51968%; visibility: hidden; }

【解决方案2】：

附带说明，以帮助任何努力实施此修复或发现它不适用于外部 svg 文件而不是页面内 svg 标记的人

您需要确保在文本编辑器中编辑 svg 文件时，在打开的 <svg> 标记中没有缺少 viewBox 或 preserveAspectRatio 属性。如果无论您应用什么修复程序都缺少这些，svg 仍然无法在 IE 中缩放 - 即使它可以在其他浏览器中缩放而没有问题。

如果设置了这些选项，您可以将用于拉入 svg 的图像元素的宽度/高度定义为 100%，并使用 max-width 或 max-height 来限制缩放，它会按预期执行。虽然 - 您仍然可能会遇到一些对齐问题。

【讨论】：

【解决方案3】：

Nicolas Gallagher 的解决方案效果很好，但是，当我减小视口时，我遇到了一些响应问题。我想我会传递我使用的修复程序：

 <div class="parent-div">
    <canvas width="3" height="1"></canvas>
    <svg class="mys" viewBox="0 0 254 108">
         <use xlink:href="#mys"></use>
    </svg>
 </div>

我用 max-width:100% 更新了“parent-div”；

.parent-div{
     position: relative;
     display: inline-block;
     height: 550px;
     max-width: 100%;
}

这不会解决您的所有扩展问题。您仍然必须使用媒体查询来更改高度，但至少 svg 不会炸毁它的容器。希望这对某人有所帮助。

【讨论】：

【解决方案4】：

如果您使用的是<img>，则可以这样重写

HTML

<div class="ie-svgHeight">
  <img src="path.svg" class="ie-svgHeight-img">
  <canvas class="ie-svgHeight-canvas"></canvas>
</div>

SCSS

.ie-svgHeight {
  position: relative;

  &-canvas {
    display: block;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
  &-img { height: 100%; }
}

【讨论】：