Javascript函數無法在IE11上構建SVG

Question

我正在使用SVG創建類似於Google Analytic的圖形來沿點繪制數據。 我提供了一個函數，該函數將接受點數組並將其構建到path元素中，該元素將插入HTML頁面上的SVG中。 此功能已在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中的Graph屏幕截圖： https : //imgur.com/a/7ZvLkb9

IE11中的Graph的屏幕截圖： https ://imgur.com/a/iaS5OJK

最后是從那里獲得javascript函數的來源： https : //medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74 https://codepen.io/francoisromain/筆/ dzoZZj

Answer 1

正如羅伯特所說，您不能在IE 11中使用innerHTML創建SVG元素。您必須自己創建元素。 要創建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>