替换< use>属性后，点击事件停止工作元素在< svg> （Win7的/ IE11） [英] Click events stop working after replacing attribute of <use> element in <svg> (Win7/IE11)

问题描述

我们使用多个 svg符号来显示图标。

 <！ - 在页面开始处定义它们 - > 
< 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> 
 
 <！ - 在页面某处使用它们 - > 
< svg> 
<使用xlink：href =＃rect>< / use> 
< / svg> 
  

在某些情况下，我们需要稍后使用另一个图标替换它们（如在合拢控件上），因此我创建了一个小帮助函数来将 xlink：href 更改为新的符号名称。

  $。fn.replaceSVGIcon =函数（id）{
 $（this）.find（'svg'）
 .andSelf（）
 .filter（'svg' ）
 .find（'use'）
 .attr（'xlink：href'，'＃'+ id）; 
 
 
 
 $ b 
这适用于所有浏览器，除了Windows 7上的IE10 + IE11（但很奇怪足够适用于Windows 8）。
 
 
 
当您在IE11中打开下面的代码片段并单击红色框时，一切都很好，但只要您开始点击元素，它会在图标首次更改后打破整个页面。
 
 
 
 
 
 
  $ .fn.replaceSVGIcon = function（id）{$（this）.find（'svg'）。andSelf（）。filter（'svg'）。find（'use'）。attr（'xlink：href'，' ＃'+ id）;}}）（jQuery）; clickFunction = function（）{var $ elem = $（'＃icon'）; （$'elem.replaceSVGIcon（'circle'）;} } else {$ elem.replaceSVGIcon（'rect'）; }};  

＃icon-container {visibility：collapse; display：none;}＃icon {height：40px;宽度：40px;填写：＃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/svgid =rectviewBox =0 0 50 50> < rect x =15y =15width =20height =20>< / rect> < /符号> < symbol xmlns =http://www.w3.org/2000/svgid =circleviewBox =0 0 50 50> < circle cx =25cy =25r =10>< / circle> < /符号> < / svg>< / div>< svg id =icononclick =clickFunction（）> < rect fill =redheight =40width =40>< / rect> < use xlink：href =＃rect>< / use>< / svg>

b
$ b

为什么会发生这种情况，并且这是已知的Internet Explorer错误？我有什么选择来解决这个问题？

解决方案

是的，这是一个已知的IE bug。 https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore如果可以的话，你应该设置<$ s $ g c $ c> pointer-events：none; 用于CSS中的use标签。这很疯狂，但它应该工作。

We are using multiple svg symbols for displaying icons.

<!-- 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>

In some cases we need to replace them later on with another icon (like on a collapse control), therefore I created a little helper function to change the xlink:href to the new symbol name.

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

This works in every browser except for IE10 + IE11 on Windows 7 (but weirdly enough it works with Windows 8).

When you open the snippet below in IE11 and click on the red box everything is fine, but as soon as you start clicking on the element within, it breaks the whole page after the icon is changed for the first time.

(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>

Why is this happening and is this a known Internet Explorer bug? What are my options to work around this issue?

解决方案

Yes, this is a known IE bug. https://connect.microsoft.com/IE/feedback/details/796745/mouse-events-are-not-delivered-at-all-anymore-when-inside-an-svg-a-use-is-removed-from-the-dom

If you can, you should set pointer-events: none; for the use tag in your CSS. It's crazy, but it should work.

这篇关于替换< use>属性后，点击事件停止工作元素在< svg> （Win7的/ IE11）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！