Using jQuery to search for SVG elements doesn't work only in IE

Question

I set and remove a class in a circle element inside an SVG block using jQuery. This works in all the latest browsers that I tested, but leads to an error in IE (9 and 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 many other actions. I removed the corresponding and error-causing bits.

In IE, the string 'find' produces an 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 class 'clicked'? By the way, I do not use this for element styles, I only added a green style to make it obvious that it worked or not.

Thanks!

Answer 1

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

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

using

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

jQuery will not use getElementsByClassName to select elements inside an SVG object ( https://github.com/jquery/sizzle/issues/322 ).

Answer 2

In IE, getElementsByClassName is available in the document, but not in SVG elements.

How about jQuery will not fix the sentence: https://github.com/jquery/sizzle/issues/322

Answer 3

I suspect the page is loading in IE7 compatibility mode.

getElementsByClassName supported by all versions of IE from IE8 and higher, so if IE complains that it is not defined, it means that you are using IE7 or earlier. Since you say you are using IE9 and IE10, I assume that this means that you are likely to be in IE7 mode.

IE7 compatibility mode removes support for various functions that were not in IE7, so you will lose support for getElementsByClassName . You will also not have SVG support, which, of course, is pretty important for your system, but that is not where the problem actually occurs.

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