Функция Javascript не будет создавать SVG на IE11 - PullRequest
Новая
       47

Функция Javascript не будет создавать SVG на IE11

0 голосов
/ 31 августа 2018

Я создаю Google Analytic, как графики, используя SVG для отображения данных по точкам. Я создал функцию, которая будет принимать массив точек и встраивать их в элемент пути, который вставляется в SVG на странице HTML. Эта функция была успешной в Chrome, Firefox, Edge и Safari, но когда она попадает в IE11, она даже не выводит элемент.

Я полагаю, что проблема совместимости лежит в svgPath (); функция. Я читал, что IE11 не поддерживает ES6 javascript, и мне интересно, может ли кто-нибудь с лучшим пониманием IE11 и javascript помочь диагностировать причину проблемы.

К вашему сведению, если я скопирую код пути из DOM в браузере, где он работает, и непосредственно поместил его в HTML, он работает на IE11. Таким образом, проблема, похоже, полностью связана с функцией javascript, а не с SVG, не отображаемым для IE11.

Javascript: 

var points = [
    [5, 10],
    [10, 40],
    [40, 30],
    [60, 5],
    [90, 45],
    [120, 10],
    [150, 45],
    [200, 10]
];

// Render the svg <path> element 
// I:  - points (array): points coordinates
//     - command (function)
//       I:  - point (array) [x,y]: current point coordinates
//           - i (integer): index of 'point' in the array 'a'
//           - a (array): complete array of points coordinates
//       O:  - (string) a svg path command
// O:  - (string): a Svg <path> element
var svgPath = function svgPath(points, command) {
  // build the d attributes by looping over the points
  var d = points.reduce(function (acc, point, i, a) {return i === 0 ? 'M ' +
    point[0] + ',' + point[1] :
    acc + ' ' + command(point, i, a);},
  '');
  return '<path d="' + d + '" fill="none" stroke="grey" />';
};

// Svg path line command
// I:  - point (array) [x, y]: coordinates
// O:  - (string) 'L x,y': svg line command
var lineCommand = function lineCommand(point) {return 'L ' + point[0] + ' ' + point[1];};

var svg = document.querySelector('.svg');
svg.innerHTML = svgPath(points, lineCommand);

HTML: 

<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    width="1000" 
    height="200" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 200 50" 
    preserveAspectRatio="xMidYMid meet" 
    class="svg">

    </svg>

Строка, которую должна возвращать функция, но не в IE11: 

<path d="M 5,10 L 10 40 L 40 30 L 60 5 L 90 45 L 120 10 L 150 45 L 200 10" fill="none" stroke="grey"></path>

Скриншот графика в Chrome: https://imgur.com/a/7ZvLkb9

Скриншот графика в IE11: https://imgur.com/a/iaS5OJK

И, наконец, источник, откуда я взял функцию javascript: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74 https://codepen.io/francoisromain/pen/dzoZZj

1 Ответ

0 голосов
/ 31 августа 2018

Как сказал Роберт, вы не можете использовать innerHTML для создания SVG-элементов в IE 11. Вы должны создать элементы самостоятельно. Чтобы создать элемент SVG <path>, используйте: 

document.createElementNS("http://www.w3.org/2000/svg", "path");

Затем вы добавляете нужные атрибуты, используя setAttribute(). 

var points = [
    [5, 10],
    [10, 40],
    [40, 30],
    [60, 5],
    [90, 45],
    [120, 10],
    [150, 45],
    [200, 10]
];

// Render the svg <path> element 
// I:  - points (array): points coordinates
//     - command (function)
//       I:  - point (array) [x,y]: current point coordinates
//           - i (integer): index of 'point' in the array 'a'
//           - a (array): complete array of points coordinates
//       O:  - (string) a svg path command
// O:  - (string): a Svg <path> element
var svgPath = function svgPath(svg, points, command) {
  // build the d attributes by looping over the points
  var d = points.reduce(function (acc, point, i, a) {return i === 0 ? 'M ' +
    point[0] + ',' + point[1] :
    acc + ' ' + command(point, i, a);},
  '');
  var path = document.createElementNS(svg.namespaceURI, "path");
  path.setAttribute("d", d);
  path.setAttribute("fill", "none");
  path.setAttribute("stroke", "grey");
  return path;
};

// Svg path line command
// I:  - point (array) [x, y]: coordinates
// O:  - (string) 'L x,y': svg line command
var lineCommand = function lineCommand(point) {return 'L ' + point[0] + ' ' + point[1];};

var svg = document.querySelector('.svg');
svg.appendChild( svgPath(svg, points, lineCommand) );
<svg version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    width="1000" 
    height="200" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    viewBox="0 0 200 50" 
    preserveAspectRatio="xMidYMid meet" 
    class="svg">

</svg>
...