简单的 SVG 网格未在 IE 10 和 IE 11 中显示答案

【问题标题】：Simple SVG Grid not being shown in IE 10 and IE 11简单的 SVG 网格未在 IE 10 和 IE 11 中显示
【发布时间】：2014-04-29 01:34:04
【问题描述】：

我得到了这个小 SVG 网格

<svg id="grid-svg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
      <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#000000" stroke-width="0.7" />
    </pattern>
    <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
      <rect width="100" height="100" fill="url(#smallGrid)" />
    </pattern>
  </defs>
  <rect x="-100%" y="-100%" width="200%" height="200%" fill="url(#grid)" />
</svg>

我在模板 html 中得到它。因为我不希望它出于某种原因保留在主页中。然后我只是克隆那块 SVG，创建一个包装 div，并将 grid-svg 附加到它上面。然后我用 jQuery 动态应用网格。

适用于 Chrome 和 Firefox，但不适用于 IE 10 和 IE 11。

你知道为什么吗？

谢谢。

【问题讨论】：

标签： javascript jquery internet-explorer svg

【解决方案1】：

这已经解决了，我正在做一个 jquery clone() 从模板中获取它，这是错误的。现在它工作正常。

【讨论】：

嗨@msqar，我也面临同样的问题。我正在使用 .html() 方法将 defs 附加到 svg，它在除 IE 9+ 之外的所有浏览器中都可以正常工作。你能帮我吗？？ $('#lineChartSVG').html('');跨度>

【解决方案2】：

我在使用 D3.js 的 SVG 时遇到了同样的问题。
我写了下面的代码来解决这个问题

    $('#lineChartSVG g').remove();
    $('#lineChartSVG path').remove();

这里我删除了以前的 g 和路径，替换为新的。

将您的标签保留在静态内容中，然后在您使用代码的地方调用上述代码。这应该工作

【讨论】：