IE11使用D3时不接受SVG高度和宽度

Question

我正在使用以下代码来设置响应式的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");

这在Chrome中能够完美地工作。然而，在IE11和Firefox中，整个图表都被缩小了（轴和字体都很小），而viewBox的值为

viewbox="0 0 1936 1056"

由于某些原因，它不接受指定的高度和宽度。但是它仍然是响应式的。

包含示例：https://jsfiddle.net/4p73n364/

有任何想法吗？ 问候， Jean

- Jean

---

你能准备一个（小）示例来展示效果吗？ - Sirko

请看这里 https://jsfiddle.net/4p73n364/ - Jean

我能看到问题，但我自己无法修复。然而，http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/ 提出的解决方案似乎有效。示例可在http://tympanus.net/Tutorials/ResponsiveSVGs/index4.html上查看。 - Sirko

似乎问题出在使用全局变量outerWidth、outerHeight以及用于轴的宽度和高度。看起来Chrome对这些全局变量的处理与其他浏览器不同，可能是某种名称空间的问题。 - Jean

Answer 1

IE浏览器有一个bug，如果你不提供宽度和高度，它无法正确缩放SVG。为了解决这个问题，您可以使用“<canvas>技巧”。关于这个问题的更多信息，可以参考这里。

您可以在这里查看示例。

我不是d3用户，所以无法帮助您解决微小标签的问题。

- Paul LeBeau

Answer 2

我们可以使用视口百分比来替代提供有时未知的宽度和高度，如下所示：

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

- nosignon

Answer 3

我在IE浏览器中以如下方式解决了问题：

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

这个样式被附加了一个js脚本。这里是我一个非常古老的项目的版本：link。

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

- kwoxer

Answer 4

试试这个。对我来说，它在IE和Chrome中都解决了这个问题：

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

- Oliver Sober