IE10 中的 SVG 缩放问题（扩展超过 SVG 大小）答案

【问题标题】：SVG zoom issue in IE10 (expand more than SVG size)IE10 中的 SVG 缩放问题（扩展超过 SVG 大小）
【发布时间】：2013-06-22 01:52:15
【问题描述】：

使用带有缩放选项的 d3.js 制作地图，如下所示：http://bl.ocks.org/mbostock/4699541。在 IE10 中进行测试时发现地图在缩放时会扩展到整个页面。我尝试添加额外的<div>，但没有成功。知道如何解决这个问题吗？

现在我有这样的代码：

var mapWidth = 500,
mapHeight = 260;

var projection = d3.geo.albersUsa()
.scale(550)
.translate([mapWidth / 2, mapHeight / 2]);

var path = d3.geo.path()
.projection(projection);

var svgDiv = d3.select("body").append("div")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("class", "svgDiv");

var svgMap = svgDiv.append("svg")
.attr("width", mapWidth)
.attr("height", mapHeight);

var svgBack = svgMap.append("rect")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("pointer-events", "all")
.style("fill", "none")
.on("click", reset);

【问题讨论】：

stackoverflow.com/questions/16176500/…的可能重复
感谢它现在可以使用 .attr("overflow", "hidden")。任何解释为什么 IE 在这种情况下表现得如此奇怪？

标签： svg maps d3.js internet-explorer-10

【解决方案1】：

将 .attr("overflow", "hidden") 添加到 SVG 解决问题，无需使用 <div>。

工作代码如下：

var mapWidth = 500,
mapHeight = 260;

var projection = d3.geo.albersUsa()
.scale(550)
.translate([mapWidth / 2, mapHeight / 2]);

var path = d3.geo.path()
.projection(projection);

var svgMap = d3.select("body").append("svg")
.attr("overflow", "hidden")
.attr("width", mapWidth)
.attr("height", mapHeight);

var svgBack = svgMap.append("rect")
.attr("width", mapWidth)
.attr("height", mapHeight)
.attr("pointer-events", "all")
.style("fill", "none")
.on("click", reset);

【讨论】：