IE11使用D3时不接受SVG高宽答案

【问题标题】：IE11 does not accept SVG height and width when using D3IE11使用D3时不接受SVG高宽
【发布时间】：2015-09-07 07:12:09
【问题描述】：

我正在使用以下内容来设置响应式 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"

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

包含的小提琴：https://jsfiddle.net/4p73n364/

有什么想法吗？问候，让

【问题讨论】：

你能准备一个（小）小提琴来展示效果吗？
给你jsfiddle.net/4p73n364
我可以看到问题，但我无法自行解决。但是，tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css 提出的解决方案似乎可行。示例可见于tympanus.net/Tutorials/ResponsiveSVGs/index4.html
看起来问题是外部宽度、外部高度以及轴的宽度和高度使用全局变量。似乎 Chrome 对待全局变量的方式与其他浏览器不同，可能是一些命名空间问题

标签： internet-explorer firefox svg d3.js

【解决方案1】：

如果您不提供宽度和高度，IE 将无法正确缩放 SVG。

要解决这个问题，您可以使用the <canvas> trick。

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

我不是 d3 用户，因此无法帮助您解决小标签问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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");

【讨论】：

【解决方案4】：

试试这个。对我来说，它为 IE 和 Chrome 修复了它：

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

【讨论】：