svg - SVG zoom issue in IE10 (expand more than SVG size)

Question

Making map with d3.js with zoom option like here: http://bl.ocks.org/mbostock/4699541. While testing in IE10 found that map expands to whole page when it is zoomed. I tried to add extra <div>, but it didn't work. Any idea how to fix this?

Now I have such code:

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);

Answer 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);