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

我遇到的问题和你在第一篇文章中描述的一样。

我发现了Chromium https://src.chromium.org/viewvc/blink?revision=170728&view=revision / https://codereview.chromium.org/218693003

的这个Bug

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

Webkit中的SVG错误（chrome和safari）：重新加载时，图像缩放和大小错误

2 个答案: