在<svg>中替換<use>元素的屬性后，Click事件停止工作（Win7 / IE11）

Question

我們使用多個svg符號來顯示圖標。

<!-- defining them at the start of the page -->
<div id="icon-container">
<svg xmlns="http://www.w3.org/2000/svg">
    <symbol xmlns="http://www.w3.org/2000/svg"
            id="rect" ...>
        <rect... />
    </symbol>

    <symbol xmlns="http://www.w3.org/2000/svg"
            id="circle" ...>
        <circle... />
    </symbol>
</svg>
</div>

<!-- using them in the page somewhere -->
<svg>
    <use xlink:href="#rect"></use>
</svg>

在某些情況下，我們需要稍后用另一個圖標替換它們（比如在折疊控件上），因此我創建了一個小幫助函數來將xlink:href更改為新的符號名稱。

$.fn.replaceSVGIcon = function(id) {
    $(this).find('svg')
           .andSelf()
           .filter('svg')
           .find('use')
           .attr('xlink:href', '#' + id);
}

這適用於除Windows 7上的IE10 + IE11之外的所有瀏覽器（但奇怪的是它適用於Windows 8）。

當你在IE11中打開下面的片段並點擊紅色框時，一切都很好，但是一旦你開始點擊其中的元素，它就會在第一次更改圖標后打破整個頁面。

 (function($){ $.fn.replaceSVGIcon = function(id) { $(this).find('svg').andSelf().filter('svg').find('use').attr('xlink:href', '#' + id); } })(jQuery); clickFunction = function() { var $elem = $('#icon'); if ($elem.find('use').attr('xlink:href') == '#rect') { $elem.replaceSVGIcon('circle'); } else { $elem.replaceSVGIcon('rect'); } }; 

 #icon-container { visibility: collapse; display: none; } #icon { height: 40px; width: 40px; fill: #454545; cursor: pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="icon-container"> <svg xmlns="http://www.w3.org/2000/svg"> <symbol xmlns="http://www.w3.org/2000/svg" id="rect" viewBox="0 0 50 50"> <rect x="15" y="15" width="20" height="20"></rect> </symbol> <symbol xmlns="http://www.w3.org/2000/svg" id="circle" viewBox="0 0 50 50"> <circle cx="25" cy="25" r="10"></circle> </symbol> </svg> </div> <svg id="icon" onclick="clickFunction()"> <rect fill="red" height="40" width="40"></rect> <use xlink:href="#rect"></use> </svg> 

為什么會發生這種情況，這是一個已知的Internet Explorer錯誤？ 我可以選擇解決這個問題嗎？

Answer 1

是的，這是一個已知的IE錯誤。 https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-來自該DOM

如果可以的話，你應該設置pointer-events: none; 用於CSS中的use標記。 這很瘋狂，但它應該有效。