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

为了使用Internet Explorer 11使SVG在我们的网站上响应，我使用了Nicholas Gallagher的“”。这种方法使用了一个额外的

canvas

元素来使用SVG来保持纵横比。内联SVG的整个结构如下所示

HTML:

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

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

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

这很好，但是维护非常烦人，因为对于每个SVG，

canvas

的

width

和

height

的值必须手动设置以匹配SVG的纵横比。由于SVG保存在单独的文件中，因此每次我都必须打开SVG以了解纵横比

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

我的想法是创建一个脚本，在注入过程中以某种方式从

viewBox

属性读取SVG的纵横比，然后相应地设置画布的宽度和高度。

为注入提供了以下挂钩：

加载前

，

加载后

，

注入前

和注入后。 在您的情况下，可以使用

afterInject

修改SVG、其父级、同级等

使用

afterInject

钩子，您不仅可以设置

元素的

宽度和
高度属性，还可以检查Internet Explorer是否正在运行，并且在这种情况下仅插入画布。这将使您的HTML更加干净

下面是一个脚本（使用jQuery），它将仅在Internet Explorer上添加画布。在
中添加这些行（包括
svg inject.js
的行应该一直在代码中）：

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

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

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

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