IE11 does not support SVG height and width when using D3

Question

I use the following to set up responsive SVG

outerHeight = 400; outerWidth = 600; var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = outerWidth - margin.left - margin.right, height = outerHeight - margin.top - margin.bottom; var svg = d3.select("div#simulation-1") .append("svg") .attr("preserveAspectRatio", "xMinYMin meet") .attr("viewBox", "0 0 "+outerWidth+" "+outerHeight) .attr("class","svg"); 

This works great in Chrome. However, in IE11 and Firefox, the whole diagram is reduced (the axis and font are tiny), and the value for viewBox is

 viewbox="0 0 1936 1056" 

For some reason, he does not accept the indicated height and s. However, he still remains unanswered.

Included script: https://jsfiddle.net/4p73n364/

Any idea? Regards, Jean

Answer 1

IE has an error when it does not scale the SVG properly if you do not provide width and height.

To fix this problem, you can use the <canvas> trick .

https://jsfiddle.net/4p73n364/12/

I am not a d3 user, so I cannot help you with the problem of small shortcuts.

Answer 2

Instead of sometimes specifying the width and height, we can use the percentage of view in the form:

 style='width:100vw; height:100vh;' 

Answer 3

I started working in IE as follows:

 <svg id="yourid" width="100%" height="100%" viewBox="750 0 2500 2500"> 

The style was added using js-script. Here is a very very old version of one of my projects: link .

 var svg = d3.select("#someid") .append("svg") .attr("width", "100%") .attr("height", "100%") .attr("id", "yourid") .attr("viewBox", "750 0 2500 2500");