CODEWITHSUNDEEP
javascriptjqueryinternet-explorersvg
msqar
msqar

Reputation: 3020

Simple SVG Grid not being shown in IE 10 and IE 11

I got this little SVG grid 

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

I got it in a template html. Because I don't want it to remain in the main page for a reason. Then I just clone that piece of SVG, create a wrapper div, and append the grid-svg to it. Then I apply the grid dynamically with jQuery.

It works for Chrome and Firefox, but it doesn't work for IE 10 and IE 11.

Do you know why?

Thanks.

Upvotes: 1

Views: 411

Answers (2)

Shailender Singh
Shailender Singh

Reputation: 260

I am using the SVG using D3.js and i had the same issue.
I wrote the below code to resolve the issue 

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

here i am removing the previous g and path, replacing with the new one.

Keep your tags in the static content and then call the above code where you used your code. This should work

Upvotes: 1

msqar
msqar

Reputation: 3020

This was solved already, i was doing a jquery clone() to get it from the template, which is wrong. Now it works fine.

Upvotes: 0

Related Questions