IE11 does not accept SVG height and width when usi

Question

I am using the following to setup a 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 perfectly in Chrome. In IE11 and Firefox however the whole chart is scaled down (axis and font are tiny) and the value for the viewBox is

viewbox="0 0 1936 1056"

For some reason it does not accept the specified height and with. However it still is reponsive.

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

Any idea? Regards, Jean

Answer 1

Try this. For me it fixed it for IE and Chrome:

<svg version="1.1" width="1936px" height="1056px" viewBox="0 0 1936 1056" >

Answer 2

IE has a bug where it doesn't scale the SVG properly if you don't provide both the width and height.

To fix that issue, you can use the <canvas> trick.

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

I'm not a d3 user, so I can't help you with the tiny labels issue.

Answer 3

I got it working in the IE in the following way:

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

The style was appended with a js-script. Here 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");

Answer 4

Instead of providing sometimes unknows widths and heights we can use Viewport percentage as:

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