图像/SVG 和 Chrome 的旋转/剪切问题

Question

我正在尝试旋转 svg，但遇到了 Chrome（版本 36）的问题，其中旋转的图像被剪切。

http://jsfiddle.net/7ehkdufj/5/

var rotation = 0;
$('#rotate').on('click', function() {
    rotation = (rotation + 60) % 360;
    $('.piece').css('transform', 'rotate(' + rotation + 'deg)');

});
$('#reverse').on('click', function() {
    rotation = (rotation - 60) % 360;
    $('.piece').css('transform', 'rotate(' + rotation + 'deg)');

});

当我使用前面的代码旋转图像时，有时会被剪裁（在 jsfiddle 示例中，它发生在 90 度和 270 度旋转时）。如果我使用“反向”旋转，那么我看不到任何剪辑。当图像被剪辑时，当我点击它时它会“修复”自己。我认为这与刷新屏幕有关。

以前有人见过这个问题吗？是否有某种解决方法？

更新：

添加一个简短的过渡似乎可以弥补或隐藏问题：

-moz-transition: all 0.01s ease;
-webkit-transition: all 0.01s ease;
-o-transition: all 0.01s ease;
transition: all 0.01s ease;

Answer 1

Chrome v36 和 SVG 的新错误。尝试将 width=80 和 height=80 添加到您的 SVG 声明中。想想旋转，其中一个边缘被剪掉了。同时删除 CSS 行 .hex { height: 80px; width: 80px; float: left; }

< svg version="1.1" viewBox="0 0 760 760" xmlns="http://www.w3.org/2000/svg" 
    id="base_hex" width="80" height="80" >

注意：scrollTop() 不是绕过它的好方法。在 Win7 Chrome v36 上仍然出现

Answer 2

尝试添加到每个旋转函数的末尾：

var x = document.documentElement.scrollTop; //firefox responds to this, but chrome doesn't
if (x === 0) { //if x is 0 then we have to check if we are in chrome
    x = document.body.scrollTop; //chrome responds to this, but firefox doesn't
}
window.scrollTo(0,(x+5)); //scrolls from current position down 5px
window.scrollTo(0,x); //then back up

这会强制刷新屏幕。

编辑：我在版本 36.0.1985.125 m 中执行此操作。我以前没有在图像上看到任何剪辑，但在 svg 上看到了。