当chrome

Question

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

fiddle example

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

从我所看到的情况来看，svg似乎没有更新，而不是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元素，这可以按照此处所示完成

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>

library(gapminder)
library(gganimate)
library(ggplot)

head(gapminder)
theme_set(theme_bw())

p <- ggplot(gapminder, aes(gdpPercap, lifeExp, size = 1, color = continent, frame = year)) +
  geom_point() +
  scale_x_log10()


animation<-gganimate(p, "your_animation.gif")#Or to your path