Using jQuery find to target SVG elements fails in IE only

问题

I'm setting and removing a class on a 'circle' element inside an SVG block with jQuery. This works in all recent browsers I've tested but results in an error in IE (9 & 10, possibly all of them).

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>

This is part of a much larger script that takes into account lots of other actions. I've stripped out the relevant and error-inducing bits.

In IE, the 'find' line results in the error:

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

Is there a better or correct way to search for all elements with the 'clicked' class? By the way, I'm not using this to style elements, I only added the green style to make it obvious that it's worked or not.

Thanks!

回答1:

Thanks to @Marlin I found working solution for you. Instead of:

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

use

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

jQuery won't use getElementsByClassName for elements selection inside SVG object (https://github.com/jquery/sizzle/issues/322).

回答2:

In IE getElementsByClassName is available on the document, but not on SVG Elements.

What about jQuery won't fix clause: https://github.com/jquery/sizzle/issues/322

回答3:

I suspect that the page is loading in IE7 compatibility mode.

getElementsByClassName is supported by all IE versions from IE8 and up, so if IE is complaining that it isn't defined then it implies that you're running IE7 or earlier. Since you say you're using IE9 and IE10, I guess that means you're likely to be in IE7 mode.

IE7 Compatibility mode remove support for various features that weren't in IE7, so you will lost support getElementsByClassName. You'll also not have support for SVG, which of course is fairly critical to your system, but that isn't where the issue is actually happening.

Solution: Add the <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> tag to your HTML` section to force IE to use the best possible rendering mode.

来源：https://stackoverflow.com/questions/30885991/using-jquery-find-to-target-svg-elements-fails-in-ie-only

标签

jquery

internet-explorer

svg