Question

要使用Internet Explorer 11在我们的网站上响应SVG，我正在使用Nicholas Gallagher的“ Canvas 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，必须手动设置width的{{1}}和height的值以匹配SVG的宽高比。而且由于SVG被保存在单独的文件中，因此我必须每次都打开SVG来查找宽高比。

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

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

Answer 1

SVGInject为注入提供了以下挂钩：beforeLoad，afterLoad，beforeInject和afterInject。您可以使用afterInject来修改SVG，其父对象，兄弟姐妹等。

使用afterInject钩子，您不仅可以设置width元素的height和<canvas>属性，还可以检查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是否正在运行。如果是这样，它将从width属性中提取height和viewBox值，并在SVG之前插入画布。此外，还设置了父级和SVG的属性以使SVG具有响应性。

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

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

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

带有SVG注入的InternetExplorer上的响应式SVG

1 个答案: