IE10中的SVG缩放问题(扩展超过SVG大小) [英] SVG zoom issue in IE10 (expand more than SVG size)

问题描述

使用带有缩放选项的d3.js进行地图绘制，例如: http://bl.ocks.org/mbostock/4699541 .在IE10中进行测试时，发现缩放后地图会扩展到整个页面.我尝试添加额外的<div>，但是没有用.任何想法如何解决这个问题?

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?

现在我有这样的代码:

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

推荐答案

在SVG中添加.attr("overflow"，"hidden")可解决问题，无需使用<div>.

Adding .attr("overflow", "hidden") to SVG solve issue and no need in using <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);

这篇关于IE10中的SVG缩放问题(扩展超过SVG大小)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！