1

我有一个切换按钮图像，它使用一对 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"
    }
});
4

2 回答 2

2

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

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

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

于 2013-09-17T21:42:39.650 回答
1

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

我为 Chromium 找到了这个错误https://src.chromium.org/viewvc/blink?revision=170728&view=revision / https://codereview.chromium.org/218693003

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

于 2014-05-06T06:27:27.020 回答