Webkit(chrome和safari)中的SVG错误:重新加载时图像缩放和大小错误

Question

我有一个使用一对SVG图像的切换按钮图像，当单击图像时会交换。 它在任何地方都很好用，除了像Chrome和Safari这样的webkit浏览器。

我创建了一个显示问题的小提琴。首次加载时，关闭的文件夹图标会正确显示。 如果单击它，它将交换出"打开文件夹"svg。 当您再次单击以关闭它时，您会再次获得第一个 SVG，但现在它放大得太大了。这在IE和Firefox中可以正常工作。

任何想法出了什么问题？

这是演示： http://jsfiddle.net/billdwhite/6gVPr/4/

这是代码：

var folderOpened = false;                                    
var imageHolder = domConstruct.create("div",{
    "class": "svgImageHolder"
}, win.body());
var svgImage = domConstruct.create("img", {
    "class":"svgImage", 
    "src": "http://www.billdwhite.com/wordpress/wp-content/images/folder_closed.svg"
},
imageHolder);
on(svgImage, "click", function() {
    if (folderOpened) {
        folderOpened = false;
        svgImage.src = "http://www.billdwhite.com/wordpress/wp-content/images/folder_closed.svg";
    } else {
        folderOpened= true;
        svgImage.src = "http://www.billdwhite.com/wordpress/wp-content/images/folder_opened.svg"
    }
});

Answer 1

如果您在 jsfiddle 中调整窗口大小，您将看到错误的图像正确显示。这意味着这是浏览器重排问题，要解决此问题，您可以强制浏览器重排：

    svgImage.style.display='none';
    svgImage.offsetHeight;
    svgImage.style.display='inline-block';

你可以在这里看到它的实际效果：http://jsfiddle.net/BX8Sj/

Answer 2

我遇到了与您在第一篇文章中描述的相同的问题。

我发现了铬 https://src.chromium.org/viewvc/blink?revision=170728&view=revision/https://codereview.chromium.org/218693003 的此错误

目前，我不知道您需要等待新的谷歌浏览器版本（可能是Chrome 35）的任何解决方法。