当chrome中的比例发生变化时,滚动条不会被修改

Question

我有一个div,在div里面我有一个'svg'元素.我想放大,每次点击'svg'元素的'scale'值都会增加,从而产生缩放效果.但是,由于某种原因,当内部'svg'的比例增大时,父div的滚动条没有被修改.这个问题只出现在Chrome中,在IE中我实际上得到了想要的结果.

小提琴的例子

var elementToScale = document.getElementById('svg');
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div>
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>

Answer 1

从我所看到的情况来看,它似乎div不是应该更新,而不是它svg本身.这意味着您需要做的是强制浏览器重绘div元素,这可以按照此处所示完成

var elementToScale = document.getElementById('svg');
var divRedraw = document.getElementById('divRedraw'); //gets the div element
var scale = 1;

document.getElementById('zoom').addEventListener('click', function() {
  scale += 0.1
  elementToScale.style.transform = "scale(" + scale + ")";
  divRedraw.style.display = 'none'; //hides the element
  divRedraw.offsetHeight; //let's the browser "catch up" on the code so it gets redrawn
  divRedraw.style.display = ''; //shows the element again
});

div {
  border: 1px solid black;
  width: 400px;
  height: 400px;
  overflow: scroll;
}
svg {
  border: 1px solid black;
}

<div id="divRedraw">
  <svg width=300px height=300px id="svg">
    <rect width=200 height=200 x=50 y=50 fill="red" />
  </svg>
</div>
<br>
<button id="zoom">
  ZoomIn
</button>