草庐IT

javascript - 替换 <svg> 中的 <use> 元素的属性后单击事件停止工作 (Win7/IE11)

coder 2023-08-02 原文

我们正在使用多个 svg symbols用于显示图标。

<!-- 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 错误吗？我有哪些解决此问题的选择？

最佳答案

是的，这是一个已知的 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-from-the-dom

如果可以，您应该为 CSS 中的 use 标签设置 pointer-events: none;。这很疯狂，但它应该有效。

关于javascript - 替换 <svg> 中的 <use> 元素的属性后单击事件停止工作 (Win7/IE11)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29149174/

ampjavascript34gtltjqueryhtmlinternet-explorersvg

有关javascript - 替换 <svg> 中的 <use> 元素的属性后单击事件停止工作 (Win7/IE11)的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby-on-rails - 如何从 format.xml 中删除 <hash></hash> - 2

    我有一个对象has_many应呈现为xml的子对象。这不是问题。我的问题是我创建了一个Hash包含此数据，就像解析器需要它一样。但是rails自动将整个文件包含在.........我需要摆脱type="array"和我该如何处理？我没有在文档中找到任何内容。 最佳答案 我遇到了同样的问题；这是我的XML:我在用这个:entries.to_xml将散列数据转换为XML，但这会将条目的数据包装到中所以我修改了:entries.to_xml(root:"Contacts")但这仍然将转换后的XML包装在“联系人”中，将我的XML代码修改为

  4. ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2

    刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr

  5. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  6. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  7. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  8. ruby-on-rails - Nokogiri:使用 XPath 搜索 <div> - 2

    我使用Nokogiri(Rubygem)css搜索寻找某些在我的html里面。看起来Nokogiri的css搜索不喜欢正则表达式。我想切换到Nokogiri的xpath搜索，因为这似乎支持搜索字符串中的正则表达式。如何在xpath搜索中实现下面提到的(伪)css搜索？require'rubygems'require'nokogiri'value=Nokogiri::HTML.parse(ABBlaCD3"HTML_END#my_blockisgivenmy_bl="1"#my_eqcorrespondstothisregexmy_eq="\/[0-9]+\/"#FIXMEThefoll

  9. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

  10. ruby - `rescue $!` 是如何工作的？ - 2

    我知道全局变量$!包含最新的异常对象，但我对下面的语法感到困惑。谁能帮助我理解以下语法？rescue$! 最佳答案 此构造可防止异常停止您的程序并使堆栈跟踪冒泡。它还会将该异常作为值返回，这很有用。a=get_me_datarescue$!在此行之后，a将保存请求的数据或异常。然后您可以分析该异常并采取相应措施。defget_me_dataraise'Nodataforyou'enda=get_me_datarescue$!puts"Executioncarrieson"pa#>>Executioncarrieson#>>#更现实的

随机推荐