Отзывчивые SVG на InternetExplorer с инъекцией SVG - PullRequest
Новая
       42

Отзывчивые SVG на InternetExplorer с инъекцией SVG

0 голосов
/ 04 октября 2018

Чтобы сделать SVG-файлы отзывчивыми на нашем сайте с помощью Internet Explorer 11, я использую « 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 и height для canvas должны быть вручнуюустановить в соответствии с форматным соотношением SVG.А поскольку SVG хранятся в отдельных файлах, мне приходится каждый раз открывать SVG, чтобы выяснить соотношение сторон.

Поэтому мне было интересно, можно ли это автоматически делать во время инъекции?.

Моя идея состояла в том, чтобы создать скрипт, который во время внедрения каким-то образом считывает соотношение сторон SVG из атрибута viewBox, а затем соответственно устанавливает ширину и высоту для холста.

1 Ответ

0 голосов
/ 04 октября 2018

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

...