Question

我得到了这个小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.

你知道为什么吗？

感谢。

Answer 1

我使用的是使用D3.js的SVG，我遇到了同样的问题我编写了以下代码来解决问题

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

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

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

Answer 2

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

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

2 个答案: