仅在 IE 中使用 jQuery find 定位 SVG 元素失败答案

【问题标题】：Using jQuery find to target SVG elements fails in IE only仅在 IE 中使用 jQuery find 定位 SVG 元素失败
【发布时间】：2015-09-02 08:36:02
【问题描述】：

我正在使用 jQuery 在 SVG 块内的“圆形”元素上设置和删除一个类。这适用于我测试过的所有最新浏览器，但会导致 IE（9 和 10，可能全部）出错。

jQuery(document).ready(function($) {
  console.log('Console running');
  var $circle = $('svg circle'),
    clicked = false;
  $circle.on({
    click: function(e) {
      setClick($(this));
    }
  });
  function removeClick(callback) {
    $('svg').find('.clicked').removeAttr("class");
    console.log('clicked removed');
    callback();
  }
  function setClick($this) {
    removeClick(function() {
      $this.attr("class", "clicked").queue(function() {
        console.log('clicked added');
        clicked = true;
      }).dequeue();
    });
  }
});

circle.clicked {
  fill:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pseudo-page cf">
  <div class="svg-container" style="position: relative; height: 0; width: 100%; padding: 0; padding-bottom: 100%;">
    <svg style="position: absolute; height: 100%; width: 100%; left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" x="0" y="0" fill="#cccccc" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 350" xml:space="preserve">
      <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/>
      <g>
        <circle cx="30" cy="25" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
        <circle cx="80" cy="30" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
        <circle cx="50" cy="60" r="10" fill="#ff0000" stroke="#000" stroke-miterlimit="10"/>
      </g>
    </svg>
  </div>
</div>

这是一个更大的脚本的一部分，它考虑了许多其他操作。我已经删除了相关的和导致错误的位。

在 IE 中，“查找”行会导致错误：

SCRIPT438: Object doesn't support property or method 'getElementsByClassName'
jquery.min.js, line 2 character 6670

有没有更好或更正确的方法来搜索所有具有“点击”类的元素？顺便说一句，我没有使用它来设置元素的样式，我只是添加了绿色样式以表明它是否有效。

谢谢！

【问题讨论】：

标签： jquery internet-explorer svg

【解决方案1】：

感谢@Marlin，我为您找到了可行的解决方案。而不是：

$('svg').find('.clicked').removeAttr("class");

使用

$('svg').find('[class=clicked]').removeAttr("class");

jQuery 不会使用 getElementsByClassName 来选择 SVG 对象 (https://github.com/jquery/sizzle/issues/322) 内的元素。

【讨论】：

【解决方案2】：

在 IE 中 getElementsByClassName 在文档上可用，但在 SVG 元素上不可用。

jQuery 不会修复子句怎么办： https://github.com/jquery/sizzle/issues/322

【讨论】：

你知道这个问题的任何解决方法/polyfill吗？
@jmarceli ，您可以使用 [class~=foo] 选择器而不是 .foo 简写来解决此问题。
谢谢。我根据您提供的链接发现了这一点。

【解决方案3】：

我怀疑页面是在 IE7 兼容模式下加载的。

getElementsByClassName 受 IE8 及更高版本的所有 IE 版本支持，因此如果 IE 抱怨它未定义，则意味着您运行的是 IE7 或更早版本。既然您说您使用的是 IE9 和 IE10，我想这意味着您可能处于 IE7 模式。

IE7 兼容模式删除了对 IE7 中没有的各种功能的支持，因此您将失去对getElementsByClassName 的支持。您也不会获得对 SVG 的支持，这当然对您的系统相当重要，但这并不是问题实际发生的地方。

解决方案：添加 <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> tag to your HTML` 部分以强制 IE 使用可能的最佳呈现模式。

【讨论】：