IE11 nicht akzeptieren SVG-Höhe und-Breite, wenn das mit D3

Ich bin mit dem folgenden setup ein 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");

Dies funktioniert perfekt im Chrom. In IE11 und Firefox, aber die ganze Karte ist verkleinert (Achse und Schrift sind winzig) und den Wert für die viewBox ist

viewbox="0 0 1936 1056"

Für einige Grund es nicht akzeptieren, die angegebene Höhe und mit. Allerdings ist es auch noch responsive.

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

Irgendeine Idee?
Grüße,
Jean

Können Sie bereiten eine (kleine) Geigen, die den Effekt?
Hier gehen Sie jsfiddle.net/4p73n364
Ich sehe das problem, aber ich bin nicht in der Lage zu meistern. Jedoch, die vorgeschlagene Lösung von tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css scheint zu funktionieren. Beispiel sichtbar in der tympanus.net/Tutorials/ResponsiveSVGs/index4.html
sieht aus wie das Problem war die Verwendung von globals für outerWidth, outerHeight, und die Breite und Höhe verwendet, die für die Achse. Scheint wie Chrome behandelt die globals anders als die anderen Browser, probalby einige Namensräume Problem

InformationsquelleAutor Jean | 2015-06-21

6

IE hat einen bug wo es nicht Maßstab der SVG richtig, wenn Sie nicht geben Sie sowohl die Breite und Höhe.

Zu beheben, dass Problem können Sie mit das <canvas> trick.

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

Ich bin kein d3-Benutzer, so kann ich dir nicht helfen, mit den kleinen labels Problem.

InformationsquelleAutor Paul LeBeau
1

Statt manchmal unknows breiten und Höhen, die wir benutzen können Viewport-Prozentsatz:
```
style='width:100vw; height:100vh;'
```
InformationsquelleAutor nosignon

Ich habe es funktioniert im IE in der folgenden Weise:

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

Stil wurde angefügt, mit einem js-Skript. Hier eine sehr sehr alte version von einem meiner Projekte: link.

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

InformationsquelleAutor kwoxer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.