InternetExplorer 上的响应式 SVG 与 SVG 注入答案

【问题标题】：Responsive SVGs on InternetExplorer with SVG injectionInternetExplorer 上的响应式 SVG 与 SVG 注入
【发布时间】：2019-03-09 19:24:17
【问题描述】：

为了使用 Internet Explorer 11 在我们的网站上响应 SVG，我使用了 Nicholas Gallagher 的“Canvas Hack”。这个 hack 使用一个额外的 canvas 元素来使用 SVG 保持纵横比。内联 SVG 的整个结构看起来像这样。

HTML：

<div style="position:relative;width:100%;">
  <canvas width="256" height="256"></canvas>
  <svg viewBox="0 0 256 256" preserveAspectRatio="xMaxYMax meet">
    ...
  </svg>
</div>

CSS：

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

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

我正在使用SVGInject 使 SVG 内联，这意味着 SVG 被保存为单独的文件。在 SVG 注入之前，HTML 如下所示：

<div style="position:relative;width:100%;">
  <canvas width="256" height="256"></canvas>
  <img src="myimage.svg" onload="SVGInject(this)" />
</div>

这很好用，但维护非常烦人，因为对于每个 SVG，canvas 的 width 和 height 的值必须手动设置以匹配 SVG 的纵横比。而且由于 SVG 保存在单独的文件中，我每次都必须打开 SVG 才能找出纵横比。

所以我想知道，这是否可以在注射过程中自动完成？

我的想法是创建一个脚本，在注入期间以某种方式从 viewBox 属性读取 SVG 的纵横比，然后相应地设置画布的宽度和高度。

【问题讨论】：

标签： css svg responsive-design internet-explorer-11

【解决方案1】：

SVGInject 为注入提供了以下钩子：beforeLoad、afterLoad、beforeInject 和 afterInject。在您的情况下，您可以使用 afterInject 修改 SVG、其父级、兄弟级等。

通过使用afterInject 钩子，您不仅可以设置<canvas> 元素的width 和height 属性，还可以检查Internet Explorer 是否正在运行并仅在这种情况下插入画布.这将使您的 HTML 更加清晰。

这是一个脚本（使用 jQuery），它将仅在 Internet Explorer 上添加画布。在<head> 添加这些行（包括svg-inject.js 的行应该已经在您的代码中）：

<script src="svg-inject.js"></script>
<script>
  SVGInject.setOptions({afterInject: function(img, svg) {
    if (/Trident|MSIE/.test(window.navigator.userAgent)) { // if Internet Explorer
      var $svg = $(svg);
      // Get width and height from viewBox attribute if available
      var viewBoxVals = ($svg.attr('viewBox') || '').split(/[\s,]+/);
      var width = parseInt(viewBoxVals[2]);
      var height = parseInt(viewBoxVals[3]);
      if (width > 0 && height > 0) {
        // Set position of parent div to relative
        $svg.parent().css({position: 'relative'});
        // Add canvas using width and height from viewBox
        $svg.before('<canvas height="' + height + '" width="' + width + '"' +
         'style="display: block; width: 100%; visibility: hidden;"></canvas>');
        // Set SVG attributes to make it fill space reserved by canvas.
        $svg.css({position: 'absolute', top: 0, left: 0});
      }
    }
  }})
</script>

注入 SVG 后，脚本会检查 Internet Explorer 是否正在运行。如果是这样，它会从viewBox 属性中提取width 和height 值，并在SVG 之前插入一个画布。此外，还设置了父级和 SVG 的属性以使 SVG 具有响应性。

然后可以像这样简单地添加 SVG：

<div style="width:100%;">
  <img src="myimage.svg" onload="SVGInject(this)" />
</div>

无需在您的 HTML 中添加画布，它会自动插入到 Internet Explorer（并且仅在 Internet Explorer 上）。

【讨论】：